Vue.js中的图片引用路径的方式


Posted in Javascript onJuly 28, 2017

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

使用一

我们在data里面定义好图片路径

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

然后,在template模板里面

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

这样是错误的写法,我们应该用v-bind绑定图片的srcs属性

<img :src="imgUrl">

或者

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

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

使用二

当我们需要在js代码里面写图片路径的时候,如果我们在data里面写

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

此时webpack只会把它当做字符串处理从而找不到图片地址,此时我们可以使用import引入图片路径:

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

在data里面定义

avatar: avatar

情形三

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

imgUrl : '../../static/logo.png'
<img :src="imgUrl" />

总结

以上所述是小编给大家介绍的Vue.js中的图片引用路径的方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
js实现简单的验证码
Dec 25 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
将 vue 生成的 js 上传到七牛的实例
Jul 28 #Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 #Javascript
详解React 16 中的异常处理
Jul 28 #Javascript
JavaScript截屏功能的实现代码
Jul 28 #Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 #Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 #Javascript
js 获取html5的data属性实现方法
Jul 28 #Javascript
You might like
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
Python while true实现爬虫定时任务
2020/06/08 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
编辑找工作求职信分享
2014/01/03 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
教师演讲稿开场白
2014/08/25 职场文书
国庆节活动总结
2014/08/26 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
企业承诺书格式范文
2015/04/28 职场文书
步步惊心观后感
2015/06/12 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
golang 实现并发求和
2021/05/08 Golang
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
Python MNIST手写体识别详解与试练
2021/11/07 Python