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

下面的代码:

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

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

<img :src="data.img" key="1" alt="" class="w-550px" />
阅读 3.4k
5 个回答

可以类似这样写:

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

return {
   data
}

F12 看再终生成的HTML是啥,

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

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

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

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

vite

webpack的话,参考vuecli文档

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

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

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

新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏