img动态引入本地图片踩坑，背景background找不到路径

最新推荐文章于 2024-06-13 10:37:27 发布

码住不放松

最新推荐文章于 2024-06-13 10:37:27 发布

阅读量650

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_53898445/article/details/123399351

版权

本文探讨了在Vue或Element UI中动态引入图片资源时遇到的问题，如标签不显示、require引入本地图片的正确用法，以及背景图片路径调整。通过实例展示了如何使用标签和正确设置URL来确保图片显示，同时介绍了背景图片的相对与绝对路径选择技巧。

摘要由CSDN通过智能技术生成

<img src="@/assets/image/1.jpg"/>

能正常显示

动态引入后，报错，图片不能正常显示

<img :src="historyFiles[0].path">
{{historyFiles[0].path}}//能正常显示

<img :src="url"/>


//引入本地图片，加上require能正常显示
url:require("@/assets/image/1.jpg")

解决办法

<el-image :src="url"/>

this.url = require('@/assets/image/' + this.historyFiles[0].name)

background：url（@/assets/img/1.jpg）不能正常显示,找不到路径

background：url（../../assets/img/1.jpg）能正常显示

关注