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 相关文章推荐
jQuery调用WebService的实现代码
Jun 19 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
将 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
js判断ie版本号的简单实现代码
2014/03/05 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
npm的lock机制解析
2019/06/20 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
让python json encode datetime类型
2010/12/28 Python
python tkinter组件摆放方式详解
2019/09/16 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
关于爱情的广播稿
2014/01/16 职场文书
中青班党性分析材料
2014/02/16 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
科学发展观活动总结
2014/08/28 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
十二生肖观后感
2015/06/12 职场文书
董事长秘书工作总结
2015/08/14 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
MySQL 服务和数据库管理
2021/11/11 MySQL
python和anaconda的区别
2022/05/06 Python