vue 用图片链接发起get请求获取加密数据后解密渲染，懒加载效果失效，图片在视图才发起get请求

这个问题可能是由于图片懒加载插件的实现方式导致的。一些懒加载插件是通过监听页面滚动事件来判断图片是否进入视图区域，然后再发起请求进行加载。但是，如果图片是通过get请求获取加密数据后再解密渲染的，那么在请求加密数据的过程中，图片的真实地址是未知的，插件无法判断图片是否进入视图区域，因此懒加载效果就会失效。

解决这个问题的方法是，在页面加载时，先将所有图片的真实地址获取并存储到一个数组中，然后再将这些图片的真实地址设置到对应的img标签的data-src属性中，最后再使用懒加载插件进行加载。这样就可以避免上述问题的发生，同时也能实现图片的懒加载。

具体实现可以参考以下代码：

<template>
  <div>
    <img v-for="(item, index) in imgList" :key="index" :data-src="item.realSrc" src="占位图片地址" class="lazyload">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: []
    }
  },
  created() {
    // 在页面加载时获取图片真实地址并存储到数组中
    this.getImgList()
  },
  methods: {
    async getImgList() {
      // 发起get请求获取加密数据并解密，获取图片真实地址
      const res = await axios.get('api/getImgList')
      const data = res.data
      this.imgList = data.map(item => {
        return {
          realSrc: this.decrypt(item.src)
        }
      })
    },
    decrypt(src) {
      // 解密函数
      // ...
    }
  }
}
</script>

<style>
/* 懒加载插件样式 */
.lazyload {
  opacity: 0;
  transition: opacity 0.3s;
}
.lazyload.lazyloaded {
  opacity: 1;
}
</style>

在这个例子中，我们使用了一个名为lazyload的懒加载插件，并将所有图片的真实地址存储在了imgList数组中。在页面加载时，我们通过发起get请求获取加密数据并解密，获取所有图片的真实地址，并将其存储到imgList数组中。然后，我们将这些图片的真实地址设置到对应的img标签的data-src属性中，并将src属性设置为占位图片地址。最后，我们使用懒加载插件进行加载。

需要注意的是，在Vue中使用懒加载插件时，需要将class属性设置为“lazyload”，并在CSS中进行样式设置。同时，懒加载插件通常会将加载完成的图片的class属性修改为“lazyload lazyloaded”，因此我们需要在CSS中对这个样式进行设置。