vue3-lazy动态加载图片的问题

github 地址：GitHub - ustbhuangyi/vue3-lazy: Lazy load plugin for Vue 3.x

第一步：安装

命令：npm install vue3-lazy -S 

第二步：在main.ts中配置

import App from './App.vue' // 根节点
import lazyPlugin from 'vue3-lazy' // 图片懒加载

const app = createApp(App)

app.use(app).use(lazyPlugin, {
  loading: 'test/loading.png', //图片加载时默认图片
  error: 'test/error.png'  // 图片错误时默认图片
}).mount('#app')

第三步： 在页面中使用

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const imgSrc= ref('test.png')  //需要展示的图片

</script>

<template>
  <div>
    <img v-lazy="imgSrc">
  </div>
</template>

如果图片是动态渲染的，原先有默认的图片从后端接口获取到新图片后，替换掉。结果渲染的图片还是原先的默认图片，这个主要是由于在vue3-lazy指令的使用中没有添加key，要去绑定key，vue3-lazy和key的路径相同

onMounted(() => {
  getNewImg().then(function (data) {
    if (data.code === 200) {
     imgSrc.value = data.record.img
    } else {
      ElMessage({
        type: 'error',
        message: data.msg
      })
    }
  })
})


<template>
  <div>
    <img v-lazy="imgSrc" :key="imgSrc">
  </div>
</template>