vue.js 图片资源路径不正确怎么解决? 下面本篇文章我们就来聊聊 vue.JS 中的图片引用路径问题. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
当我们在 Vue.JS 项目中引用图片时, 关于图片路径有以下几种情形:
使用一:
在 data 里面定义好图片路径:
/* 错误写法 */ imgUrl:'../assets/logo.png'
在 template 模板里面:
/* 错误写法 */ <img src="{{imgUrl}}">
以上是错误写法, 我们应该用 v-bind 绑定图片的 src 属性:
- <img :src="imgUrl">
- // 或者
- <img src="../assets/logo.png">
这种方式是按照正常 html 语法引用路径, 放在模板里可以被 webpack 打包出来.
使用二:
当我们需要在 JS 代码里面写图片路径的时候, 如果我们在 data 里面写, webpack 只会把它当做字符串处理从而找不到图片地址,
错误写法
imgUrl:'../assets/logo.png'
此时我们可以使用 import 引入图片路径:
- <img :src="imgUrl" />
- import avatar from '@/assets/logo.png'
在 data 里面定义: avatar: avatar
使用三:
我们也可以把图片放在外层的 static 文件夹里面, 然后在 data 里面定义:
- imgUrl : '../../static/logo.png'
- <img :src="imgUrl" />
更多 Web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/18267.html