Проблема с вставкой изображения с помощью v-bind

Question

Хочу сделать так, чтобы тег img c помощью v-bind вывел картинку, которая лежит в папке assets. Путь к изображению указан в свойстве объекта в модели, которая представляет собой массив из объектов. Данные передаются как надо, судя по просмотру кода страницы в браузере, но изображения нет.

Вид объекта:

{id: 1, title: 'HTML5', rate: 4, image: '../assets/image 1.png'}

Тег:

 <img class="skillImg" :src="elem.image" alt="">

UPD: Добавляю вид структуры проекта. Выделен компонент, в котором все происходит.

Answer 1

Вы пытаетесь подставить строку, а не путь до файла, сначала импортируйте файл и подставьте путь к нему

Вам необходимо "сказать" сборщику о том, что необходимо добавить файл в сборку, для этого явно импортируйте его, результат импорта будет являться путём к файлу.

<script setup>
import Image1 from '@/assets/image 1.png'
import Image2 from '@/assets/image 2.png'
import Image3 from '@/assets/image 3.png'
import Image4 from '@/assets/image 4.png'

const items = [
    { id: 1, title: 'HTML5', rate: 4, image: Image1 },
    { id: 2, title: 'HTML6', rate: 4, image: Image2 },
    { id: 3, title: 'HTML7', rate: 4, image: Image3 },
    { id: 4, title: 'HTML8', rate: 4, image: Image4 },
]
</script>

<template>
  <img v-for="item of items" :key="item.id" :src="item.image" />
</template>

Когда вы указываете src прямо в template для img, то сборщик автоматически обнаруживает и импортирует файл подставляя путь точно так же, как бы вы использовали пример выше

БЛОГ НА HUSL

Проблема с вставкой изображения с помощью v-bind

Ответы (1 шт):