Как вставить динамический путь для картинки?

Question

[kot98]

Изображение находится в assets.
Родитель:

<template>
<div>
        <swiper
          ...
        >
          <swiper-slide v-for="(item, index) in interiorsArr" :key="index">
            <c-interior-card :item="item" />
          </swiper-slide>
        </swiper>
      </div>
</template>

<script setup lang="ts">
const interiorsArr = [
  {
    title: 'Kitchen,
    text:'Description text,
    imageUrl: '@/assets/kuhnya.jpg',
  },
...
</script>

Дочерний компонент:

<template>
  <div class="c-interior-card">
    <div class="c-interior-card__image">
      <img :src="require(props.item.imageUrl)" alt="sad">
    </div>
    <div class="c-interior-card__description">
      <div class="c-interior-card__title">{{ props.item.title }}</div>
      <div class="c-interior-card__text">{{ props.item.text }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
type Props = {
  item: {
    title: string
    text: string
    imageUrl?: string
  }
}
</script>

В итоге получаю ошибку Cannot find module '@/assets/kuhnya.jpg'
В чем проблема и как ее можно решить?

Comments

[kot98]

UPD: поправил
:src="require(`../assets/${props.item.imageUrl}`)"
в imageUrl задал просто название файла.
Таким образом заработало, только не понял почему...

Answer 1

[modelair]

https://vitejs.dev/guide/assets.html

для небольших страниц я обычно делаю отдельный assets.ts файл и импортирую ресурсы в него

import beacon from './assets/beacon.svg'
import cloud from './assets/cloud.svg'
import sun from './assets/sun.svg'

export const images = { sun, beacon, cloud }