解决.heic图片格式不显示问题

   <template>
  <div class="maddins">
    <div v-for="(item, i) in imgHtmls" :key="i">
      <img style="width: 5rem; height: 100%" :src="item" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      getBase64ByUrl: null,
      imgHtmls: [],
    };
  },
  mounted() {
    this.getBase64ByUrl = function (src, callback, outputFormat) {
      let newurl = src;
      var xhr = new XMLHttpRequest();
      xhr.open("GET", newurl, true);
      xhr.responseType = "arraybuffer";
      xhr.onload = function (e) {
        if (xhr.status == 200) {
          var uInt8Array = new Uint8Array(xhr.response);
          var i = uInt8Array.length;
          var binaryString = new Array(i);
          while (i--) {
            binaryString[i] = String.fromCharCode(uInt8Array[i]);
          }
          var data = binaryString.join("");
          var base64 = window.btoa(data);
          var dataUrl =
            "data:" + (outputFormat || "image/png") + ";base64," + base64;
          callback.call(this, dataUrl);
        }
      };
      xhr.send();
    };
    this.getlist();
  },
  methods: {
    getlist() {
      var list = [
        "http://hmjh-files.zhanyaa.com/file/202107/20210706153522-KUnI6.HEIC",
        "http://hmjh-files.zhanyaa.com/file/202107/20210706153522-XMeqh.HEIC",
      ];
      var that = this;
      list.forEach((el) => {
        this.getBase64ByUrl(el, function (url) {
          that.imgHtmls.push(url);
          // that.imgHtmls = url;
          // console.log(url);
        });
      });
    },
  },
};
</script>