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 DOM学习第八章 表单错误提示
Feb 19 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
初步了解javascript面向对象
Nov 09 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
js中!和!!的区别与用法
May 09 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
Django app配置多个数据库代码实例
2019/12/17 Python
python3 简单实现组合设计模式
2020/07/02 Python
Ratchet 模态框的实现
2020/08/19 HTML / CSS
安卓程序员求职信
2014/02/28 职场文书
交通事故私了协议书
2014/04/16 职场文书
党支部意见范文
2015/06/02 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
python实现监听键盘
2021/04/26 Python
Python Numpy库的超详细教程
2022/04/06 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS