Vue图片路径问题(动态引入)

vue项目中我们经常会遇到动态路径的图片无法显示的问题,以下是静态路径和动态路径的常见使用方法。

1.静态路径

在日常的开发中,图片的静态路径通过相对路径和绝对路径的方式引入。

相对路径:以.开头的,例如./、../之类的。就是相对于自己的目标文件的位置。

绝对路径:以/开头的。就是目标文件的真实路径。表示当前站点的根目录。

(1)静态相对路径

<img src="../../assets/1.png" />

<img src="@/assets/1.png" />

(2)静态绝对路径

一般使用public下的资源

public文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过webpack。你需要通过绝对路径来引用它们。

<img src="images/1.png" />

<img src="/images/1.png" />

2.动态路径

(1)动态相对路径(使用require)

写在HTML里:

<img :src="require('../../assets/' + imageUrl)" />

或者

写在js里

<img :src="imageUrl" />

imageUrl: require('../../assets/' + this.img)

需要注意:使用require不能直接用变量接收地址,一般采用字符串模板或变量名+空字符串。以下为两种写法:

require(`${url}`); //正确用法

require(url + '')

注意:

以上使用的图片都在项目中,如果要使用本地文件或者服务器文件需要将文件上传到指定文件夹里,在采取以下方式:

F:/file/为上传图片指定路径,后面参数为文件名称

(2)动态绝对路径

与静态引入相同。之所以这样是因为public 目录下的文件不会被编译,部署后可以通过绝对路径获取到。如果还放在原来的 assets 目录中,就会被webpack打包成新的文件夹。

参考文章:百度

相关推荐
你的人类朋友24 分钟前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
Mintopia30 分钟前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
打瞌睡de喵32 分钟前
JavaScript 空对象检测
javascript
前端太佬34 分钟前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Mintopia36 分钟前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
艾克马斯奎普特40 分钟前
Vue.js 3 渐进式实现之响应式系统——第三节:建立副作用函数与被操作字段之间的联系
javascript·vue.js
xRainco41 分钟前
Redux从简单到进阶(Redux、React-redux、Redux-toolkit)
前端
印第安老斑鸠啊42 分钟前
由一次CI流水线失败引发的对各类构建工具的思考
前端
CodePencil44 分钟前
CSS专题之外边距重叠
前端·css
hepherd1 小时前
Flask学习笔记 - 表单
前端·flask