О проблеме введения картинок в vue

Когда ваш файл изображения находится в папке с ресурсами, есть несколько способов его использования:

Напишите путь прямо в этикетке

<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文件夹下的images文件夹里
<img :src="publicPath+'images/hhh.jpg'" class="image"></img>

//首先在data中声明一个变量
data(){
    return{
        publicPath:process.env.BASE_URL
    }
}