关于vue和elementui 动态路径图片展示

最新推荐文章于 2024-10-23 10:58:19 发布

ldqwananxh

最新推荐文章于 2024-10-23 10:58:19 发布

阅读量1.2k

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/ldqwananxh/article/details/118303186

版权

本文探讨了在Vue.js项目中，如何结合ElementUI库实现动态路径的图片展示，通过设置数据属性和模板语法，使得图片路径能够在运行时根据需求变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于vue和elementui 动态图片展示

1.写代码的时候遇到Error: Cannot find module…这种错误
数据库中直接存的是一个相对路径就是这样：
在这里插入图片描述

2.代码是这样的： :src="require(this.item.technician.headerImg)"
3.错误是这样的：在这里插入图片描述

4.于是我直接在数据库中存文件名字，然后前面的相对路径固定写死，后面打算拼接文件名字
在这里插入图片描述

代码改成require('../../../assets/imgupload/'+this.item.technician.headerImg)
最终就可以动态展示图片了。

正常写死路径
<img :src="require('../../../assets/icons/selected.png')" class="header-img" />
还可以在下面生命变量
<img v-if="headerImg" :src="headerImg" class="header-img" />
下面data中data() { return { headerImg: require('../../../assets/icons/selected.png'), } },