Vue.js中的图片引用路径的方式
作者:卜小娴 时间:2024-05-09 15:28:10
当我们在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中的图片引用路径的方式网站的支持!
来源:http://blog.csdn.net/letasian/article/details/76219889
标签:vuejs,图片,引用路径
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
一些关于asp 购物车的想法
2011-04-10 11:10:00
sql2005 安装教程 图文
2024-01-16 23:47:51
![](https://img.aspxhome.com/file/2023/1/104141_0s.png)
ASP(JScript)构建SQL语句“类”
2008-04-30 07:12:00
Vue常用传值方式、父传子、子传父及非父子实例分析
2024-05-29 22:43:32
![](https://img.aspxhome.com/file/2023/3/123043_0s.png)
JS实现网页滚动条感应鼠标变色的方法
2024-04-18 10:52:44
SQL Server把某个字段的数据用一条语句转换成字符串
2024-01-13 16:10:12
Python中的Numpy入门教程
2023-04-10 06:59:10
如何提示用户打开Cookie?
2010-06-07 20:53:00
js 中以 ... 为前缀的几种用法详解
2024-04-18 09:40:38
![](https://img.aspxhome.com/file/2023/9/136359_0s.png)
ASP中Session技巧 默认过期时间为20分钟
2012-12-04 20:28:26
如何将 awk 脚本移植到 Python
2022-02-28 05:40:52
python爬虫Scrapy框架:媒体管道原理学习分析
2022-11-23 15:07:03
![](https://img.aspxhome.com/file/2023/8/87738_0s.jpg)
SpringBoot Security使用MySQL实现验证与权限管理
2024-01-22 15:32:00
![](https://img.aspxhome.com/file/2023/4/79324_0s.png)
Typora+PicGo+GitHub实现md自带图床效果
2023-05-24 23:02:24
![](https://img.aspxhome.com/file/2023/7/131867_0s.jpg)
Python os库常用操作代码汇总
2021-04-17 04:07:51
Python的轻量级ORM框架peewee使用教程
2021-09-01 06:55:21
python使用socket高效传输视频数据帧(连续发送图片)
2021-04-14 23:17:40
![](https://img.aspxhome.com/file/2023/9/130549_0s.png)
mysql中count(), group by, order by使用详解
2024-01-26 00:48:11
python生成图片验证码的方法
2022-07-27 13:39:11
![](https://img.aspxhome.com/file/2023/9/87829_0s.jpg)
详解python发送各类邮件的主要方法
2023-07-27 11:08:50