项目 图片引用"/>
vue项目 图片引用
vue版本:vue 2.x
脚手架:webpack
1、静态引用图片
像logo、等一些不变的图片,通常直接是直接写s的
1.1、图片在assets下
创建webpack项目时会生成
/src/assets
如果图片在该文件下,可以通过此方式引用(直接引用路径):
<img src="@/assets/图片路径" ><!--<img src="../assets/图片路径" >
这里的 @ 指的是该项目
-->
1.2、图片在static下
也会自动生成一个
static
文件夹(跟src
平级)
此时图片在该文件下,可以通过此方式引用(直接引用):
<img src="../../static/图片路径" >
注:此时就不能使用
@
,可以直接点点到图片路径中;
2、动态引用图片
2.1、图片在assets下
同上,会自动创建该文件
这时直接使用获取到的图片路径是行不通的,需要对其图片进行 require
载入操作:
// html
<img :src="setImg(图片路径)" />
绑定一个方法,对图片路径进行载入操作
// js 图片处理方法
methods: {setImg (imgUrl) {return require('@/' + imgUrl)}}
2.2、图片在static下
同上,也会生成一个static文件
这个时候是可以直接使用从数据库获取的图片路径;
是不能使用
require
进行载入,报错(找不到资源模块);
2.3、使用图片链接
直接使用图片链接地址;
// 图片地址
data () {return {imgLink: '.jpg?thumb=1&w=1226&h=460&f=webp&q=90'}},
<img :src="imgLink"/>
更多推荐
vue项目 图片引用
发布评论