关于vue中引入图片问题

当你的图片文件在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
    }
}