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 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
短波的认识
2021/03/01 无线电
如何开发一个虚拟域名系统
2006/10/09 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
phalcon框架使用指南
2016/02/23 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
在Python中操作字典之update()方法的使用
2015/05/22 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Python按钮的响应事件详解
2019/03/04 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
哈理工毕业生的求职信
2013/12/22 职场文书
个人自我剖析材料
2014/02/07 职场文书
财政专业求职信范文
2014/02/19 职场文书
先进事迹材料范文
2014/12/29 职场文书
薪资证明范本
2015/06/19 职场文书
情人节单身感言
2015/08/03 职场文书
企业团队精神心得体会
2016/01/19 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
Python实现socket库网络通信套接字
2021/06/04 Python
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
MYSQL如何查看操作日志详解
2022/05/30 MySQL