vue.js图片资源路径不正确怎么办


本文摘自PHP中文网,作者藏色散人,侵删。

vue.js图片资源路径不正确的解决办法:1、用v-bind绑定图片的src属性;2、使用import引入图片路径;3、把图片放在外层的static文件夹里面,然后在data里面定义imgUrl即可。

本教程操作环境:windows7系统、vue2.0版,DELL G3电脑,该方法适用于所有品牌电脑。

【相关文章推荐:vue.js】

当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形:

使用一:

在data里面定义好图片路径:

1

/*错误写法*/    imgUrl:'../assets/logo.png'

在template模板里面:

1

/*错误写法*/   <img src="{{imgUrl}}">

以上是错误写法,我们应该用v-bind绑定图片的src属性:

1

2

3

<img :src="imgUrl">

//或者

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

这种方式是按照正常HTML语法引用路径,放在模板里可以被webpack打包出来。

阅读剩余部分

相关阅读 >>

快速入门bootstrapvue

vue.js的优势是什么

vue.js怎么用jq

为何使用vue.js

vue.js是一种框架吗

vue.js的优点是什么

vue.js支持移动端开发吗

vue.js主要应用哪方面

vue.js为什么要用谷歌浏览器

关于vue使用验证器: veevalidate3

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




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...