Why does the image obtained by vue: appear blank for the first time and refresh manually again before it appears?

scene: ios Wechat
A hyperlink whose picture starts with http
opens the image rendering blank data in ios (Wechat) for the first time. The image will not show normal until it is refreshed again
.
after testing, there is no such problem in android

.

html

<div class="bugImg" v-if="bugDetail">
  <img
    v-for="(imgItem,index) in bugDetail.disposefileList"
    :key="imgItem.index"
    :src="imgItem"
    alt
    @click="imagePreview(index)"
   >
</div>

js

export default {
  name: "BugDetail",
  data() {
    return {
      bugId: "",
      bugDetail: {},
    };
  },
  created() {
    this.bugId = this.$route.query.bugId;
  },
  mounted() {
    this.getBugDetail();
  },
  methods: {
    getBugDetail() {
      let data = {
        id: this.bugId
      };
      API.getBugById(data)
        .then(res => {
          if (res.errCode == 0) {
            this.bugDetail = res.data;
          } else {
          }
        })
        .catch(error => {});
    },
  },
  components: {
  }
};
Feb.27,2022

found out the reason. Changing the link returned in the background from http to https solved this problem. It should be caused by Wechat's security policy. It is not clear that if there is a big god who understands the trouble, explain that it has little relationship with the code posted on me at present


try to add one: vMuif = "imgItem"

.
Menu