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的三级展开列表
Apr 26 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
javaScript基础详解
Jan 19 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
详解JWT token心得与使用实例
Aug 02 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP文件读写操作之文件写入代码
2011/01/13 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
php实现json编码的方法
2015/07/30 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
jQuery写fadeTo示例代码
2014/02/21 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
意大利在线药房:Saninforma
2021/02/11 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
社团文化节策划书
2014/02/01 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript