client-base-v5/src/widget/AuthImage.vue

<template>
  <img :src="src" @onload="onload" @click="$emit('click')" />
</template>
<script>
export default {

  
  props: {
    authSrc: {
      type: String,
      default: null,
    },
  },
  emits: ['click'],



  data: function () {
    return {
      src: '',
    };
  },

  watch: {
    authSrc: function (newValue, oldValue) {
      if (newValue != oldValue) {
        this.loadImage(newValue);
      }
    },
  },

  mounted: function () {
    this.noImage = '/static/assets/client-base-v4/image/no-image.png';
    this.errorImage = '/static/assets/client-base-v4/image/load-error.png';
    this.loadingImage = '/static/assets/client-base-v4/image/loading.gif';
    this.src = this.loadingImage;
    this.loadImage(this.authSrc);
  },

  methods: {
    loadImage: function (url) {
      let _self = this;

      if (url == null || url == '') {
        _self.src = this.noImage;
        return;
      }
      this.src = this.loadingImage;


      fetch(url, {
        method: 'GET',
        cache: 'default',
        headers: {
          'token': localStorage.getItem('#token'),
          'Cache-Control': 'max-age=2592000',
        },
      }).then(res => res.blob())
        .then(blob => {
          _self.src = URL.createObjectURL(blob);
        })
        .catch(err => {
          console.error(err);
        });


      // let request = new XMLHttpRequest();
      // request.responseType = 'blob';
      // request.open('get', url, true);
      // request.setRequestHeader(
      //   'token', localStorage.getItem('#token'),
      // );
      // request.setRequestHeader(
      //   'Cache-Control', 'max-age=3600',
      // );
      // request.onload = function (e) {
      //   if (this.status == 200) {
      //     _self.src = URL.createObjectURL(this.response);
      //   } else {
      //     _self.src = _self.errorImage;
      //   }
      // };
      // request.send(null);
    },

    /**
     * 图片加载完毕，调用本方法，释放通过URL.createObjectURL()创建的对象URL
     */
    onload: function () {
      let _self = this;
      URL.revokeObjectURL(_self.src);
    },
  },
};
</script>