img标签添加自定义header，手动请求回显

问题：由于某种需求原因，请求接口时请求头headers须带认证信息进行鉴权，所以使用img src= “ip+url” 浏览器的默认行为的方法不接收请求拦截，无法显示图片。

解决：vue2 手动请求并处理

1. 封装一个展示图片的组件imageView，使用props传输url，并监听url的变化，请求远程图片。

<img ref="img" alt="图片" />

props: {
    src: {
      type: Object,
      default: {},
    },
  },
  watch: {
    src: {
      handler(n) {
        if (n) {
          this.handlePreview(n);
        }
      },
      immediate: true,
    },
  },
  methods: {
    async handlePreview(item) {
      let that = this;
      const url = item.url || "";
      const headers = {
        token: window.sessionStorage.id,
        ...  // 其他认证参数
      };
      if (url) {
        that.$nextTick(() => {
          GET_File(url, headers).then((res) => {
            // 处理图片二进制
            that.$refs.img.src = URL.createObjectURL(res);
            that.$refs.img.onload = () => {
              that.$refs.img && URL.revokeObjectURL(that.$refs.img.src);
            };
          });
        });
      }
    },
  },

GET_File 为自己封装的请求文件流的方法

function GET_Files(url, headers = defaultHeaders) {
    return axios({
        url: "代理" + url,
        method: "get",
        headers,
        responseType: "blob",
    });
}

2. 在需要使用的地方引入，传入图片 url。

// text 是请求到包含 url 的对象字符串
<image-view :src="text ? JSON.parse(text) : {}"></image-view>

参考地址