Есть код:
<TheatreBlockDiv v-for="movie in movies" :key='movie.id'>
<router-link :to="movie.link">
<TheatreBlockImg :src="require(`${movie.image}`)" alt="Фильм"/>
<h3 class="theatre-block__div-title">{{movie.title}}</h3>
</router-link>
</TheatreBlockDiv>
Вот так выглядит мой массив фильмов:
movies: [
{
title: "Фильм",
image: "../assets/photo.jpg",
link: "/infomovie",
id: 0,
},
{
title: "Фильм",
image: "../assets/photo.jpg",
link: "/infomovie2",
id: 1,
},
{
title: "Фильм",
image: "../assets/photo.jpg",
link: "#",
id: 2,
},
{
title: "Фильм",
image: "../assets/photo.jpg",
link: "#",
id: 3,
},
{
title: "Фильм",
image: "../assets/photo.jpg",
link: "#",
id: 4,
},
{
title: "Фильм",
image: "../assets/photo.jpg",
link: "#",
id: 5,
},
{
title: "Фильм",
image: "../assets/photo.jpg",
link: "#",
id: 6,
},
]
Вот так выглядит мой компонент TheatreBlockImg:
<template>
<img class="theatre-block__img">
</template>
<script>
export default {
name: "TheatreBlockImg",
}
</script>
<style scoped>
.theatre-block__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
Выходит ошибка:
Uncaught (in promise) Error: Cannot find module '@/assets/photo.jpg'
Но если захардкодить:
<TheatreBlockImg :src="require(`@/assets/photo.jpg`)" alt="Фильм"/>
Тогда все работает.
Как победить эту проблему? В Google ничего толкового не нашёл.
