将vue项目的图片请求带上请求头如token

封装了一个图片组件直接上代码

<template>
  <img ref="img"> </img>
</template>
<script>
import { mapActions, mapGetters } from "vuex";

export default {
  name: "authImg",
  props: {
    authSrc: {
      type: String,
      required: false,
      default: "",
    },
  },
  computed: {
    ...mapGetters({
      userInfo: "userInfo",
    }),
  },
  mounted() {
  //这是区分开发环境和生产环境,视情况而定
  this.authSrc =
      (process.env.NODE_ENV == "development"
        ? "/api"
        : process.env.VUE_APP_BASE_API) + this.authSrc;
  
    Object.defineProperty(Image.prototype, "authsrc", {
      writable: true,
      enumerable: true,
      configurable: true,
    });
    
    let img = this.$refs.img;
    let request = new XMLHttpRequest();
    request.responseType = "blob";
    request.open("get", this.authSrc, true);
    //这里带上请求头
    request.setRequestHeader("Authorization", this.userInfo.token);
    request.onreadystatechange = (e) => {
      if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
        img.src = URL.createObjectURL(request.response);
        img.onload = () => {
          URL.revokeObjectURL(img.src);
        };
      }
    };
    request.send(null);
  },
};
</script>

组件调用

      <auth-img :authSrc="authSrc" style="width:60px;height:60px"></auth-img>
      //这是为了区分生产环境和开发环境
      authSrc=`/onlinePreview/${value}`