pc-component-v5/packages/image/src/AuthImage.vue

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

  name: 'AuthImage',

  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);
          _self.src = _self.errorImage;
        });
    },

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