Как во vue выводить динамические картикни из assets?

Question

[WebDev]

В цикле создаются слайды, которые состоят из картинки и названия. Картинки хранятся в assets.
Если бы это не было циклом, то выглядело бы так:

<img src="@/assets/image1.jpg">
<img src="@/assets/image2.jpg">
<img src="@/assets/image3.jpg">

А в цикле примерно так:

<div v-for="slide in slides">
    <img :src="slide.image">
</div>

...

data() {
    return {
        slides: [
            {image: '@/assets/image1.jpg'}, 
            {image: '@/assets/image2.jpg'}, 
            {image: '@/assets/image3.jpg'}
        ]
    }
}

Вот такой код подставляет картинку в src "как есть", то есть "@/assets/...".
Как сделать, чтобы в данном случае @ заменялась на корень?
В гугле рекомендуют создать метод getImg:

getImg(image) {
    return require(image);
}

Но во-первых require не работает с @ (нужно указывать путь относительно файла, То есть что-то вроде '../../assets/image1.jpg'), а во-вторых выглядит не очень.
Есть ли способ динамически вставлять картинки через @?

Answer 1

[Андрей Хохлов]

Варианты есть:
https://medium.com/front-end-weekly/webpack-and-dy...
https://dev.to/pldg/lazy-load-images-with-webpack-5e80

Но я бы порекомендовал вам такие картинки просто копировать кучей (папка public если используете vue-cli), а не импортировать с помощью webpack.
А ещё лучше пересмотреть кейс. Динамичные картинки в неограниченном количестве скорее всего должны быть не частью интерфейса приложения, а где-то куда-то заливаться и приходить только в виде ссылок от серверного API.
Тот же слайдер - в админке администратор загружает картинки, а приложение получает данные для слайдера и рендерит.

Answer 2

[Александр Дроздов]

Картинки должны быть статикой и никак не касаться фронта, я про разные require и другие костыли.
На фронте должны известны только имена, и по относительному пути подсасываться (тупо подставлять в тег img src), они автоматически загрузятся браузером по указаному пути http: site.ru/public/image1.jpg

Answer 3

[skuvaWeb]

Самый простой, и как по мне правильный вариант это

data() {
    return {
        slides: [
            {image: require('@/assets/image1.jpg')},
        ]
    }
}