当你的图片文件在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文件夹下,此时写法如下: