vue.js图片资源路径不正确怎么办(2)-木庄网络博客

2022-04-17 10:45:39 PHP中文网 JavaScript 百度已收录

使用二：

当我们需要在js代码里面写图片路径的时候，如果我们在data里面写，webpack只会把它当做字符串处理从而找不到图片地址，

错误写法

1	`imgUrl:'../assets/logo.png'`

此时我们可以使用import引入图片路径：

1 2	`<img :src="imgUrl"` `/>` `import avatar from` `'@/assets/logo.png'`

在data里面定义：avatar: avatar

使用三：

我们也可以把图片放在外层的static文件夹里面，然后在data里面定义：

1 2	`imgUrl ：` `'../../static/logo.png'` `<img :src="imgUrl"` `/>`

相关阅读 >>

更多相关阅读请进入《vue.js》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者