vue3中给img的src赋值的问题？

Question

下面的代码：

 <img src="@/assets/svgs/loginx.svg" key="1" alt="" class="w-550px" />

改成：data.img是通过逻辑拿的，图片文件在相应目录也存在，这种为什么就是不显示呢？？

<img :src="data.img" key="1" alt="" class="w-550px" />

Answer 1

可以类似这样写：

const data: any = reactive({
   img: require('../../xxx/yyy.png')
})

return {
   data
}

Answer 2

F12 看再终生成的HTML是啥，

Answer 3

打包的时候，构建工具会把html、css中引入url当作依赖，最终产物中url经过处理。比如src="./img.png"，在生产构建后可能会是 /assets/img.2d8efhg.png。

js变量中的data.img，构建工具会当作字符串，完整保留。

js要使用依赖的话，需要通过import或者require引入对应的文件，告诉构建工具这里是一个依赖，然后赋值赋值给变量。

具体的原因可以参考对应的构建工具，插件的文档

vite

webpack的话，参考vuecli文档

Answer 4

你得先用import.meta.glob把@/assets/svgs下面的所有资源引入，然后根据资源自己生成一个mapping，用路径字符串对应一个文件，如

{
    '@/assets/svgs/loginx.svg': svgFile // 这是你拿到的那个文件
}

之后再通过 data.img 获取到对应的文件就行了

Answer 5

你在路径前面加上src就ok了