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打包出来。

阅读剩余部分

相关阅读 >>

怎么创建vue.js项目

vue.js是前端还是后端

通过代码实例,带你了解v-model(值得收藏)!

vue.js如何上传文件

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

如何知道vue.js的版本号

vue.js基于什么

vue.js计算属性是什么?(代码示例)

vue.js中如何注册组件

怎样运行别人的vue.js

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




打赏

取消

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

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

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

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

评论

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