当你的图片文件在assets文件夹下,有以下几种用法:
在标签中直接写路径
<img src="../../assets/images/hhh.jpg" class="image"></img>
背景图也可以直接在样式中写路径
.image{
background:url('../../asstes/images/hhh.jpg') no-repeat;
}
以上是静态的,动态引入图片就需要js的配合了
<img :src="imgUrl" class="image"></img>
//import引入
import imgUrl from '../../assets/images/hhh.jpg'
//data中设置变量
data(){
return{
//可以直接写路径
imgUrl:'../../assets/images/hhh.jpg',
//也可以用require引入
imgUrl:require('../../assets/images/hhh.jpg')
}
}
//在函数中给imgUrl赋值
created(){
this.imgUrl = '../../assets/images/hhh.jpg'
}
当你的图片特别多,需要动态引入的时候,我们可以把图片放在public文件夹下,此时写法如下:
//假如你的图片放在public文件夹下的images文件夹里
<img :src="publicPath+'images/hhh.jpg'" class="image"></img>
//首先在data中声明一个变量
data(){
return{
publicPath:process.env.BASE_URL
}
}