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 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 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
PHP实现邮件群发的源码
2013/06/18 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
远程研修随笔感言
2014/02/10 职场文书
党员岗位承诺书
2014/03/25 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
2015年纪委工作总结
2015/05/13 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
2016公司新年问候语
2015/11/11 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书