Vite/Vue 3: "Keperluan tidak ditentukan" apabila menggunakan sumber imej sebagai prop

Question

Saya bertukar daripada Vue CLI kepada Vite CLI, dan daripada API Komposisi Vue 3 kepada API persediaan SFC SFC.

Bagaimana ia berkesan untuk saya sebelum ini

Apabila saya menggunakan Vue CLI rasmi, saya boleh mengimport sumber imej dengan menghantar nama fail laluan melalui prop:

<template>
  <img :src="require(`@/assets/${imagePath}`)"/>
<template/>

<script>
export default {
  props: {
    imagePath: { type: String },
  },
  setup() {
    // ...
  }
}
<script/>

Kemudian panggilnya seperti ini:

<template>
  <Image imagePath="icon.png" />
</template>

Ralat ditemui selepas berhijrah ke Vite

Tetapi sejak saya berhijrah ke Vite CLI, saya mendapat ralat "Uncaught ReferenceError: require is not Defined". Fail saya kini menggunakan sintaks tetapan skrip seperti ini:

<script setup>
const props = defineProps({
  imagePath: { type: String },
})
</script>

<template>
  <img :src="require(`@/assets/${props.imagePath}`)"/>
</template>

Apa yang saya cuba

Saya telah cuba mengimport fail terus daripada folder aset menggunakan laluan relatif dan ia berjaya. Tetapi saya tidak dapat menentukan laluan prop menggunakan pernyataan import.

<script setup>
// Works but do not use the props, so the component is not reusable
import logo from "./../assets/logo.png"
</script>

<template>
  <img :src="logo"/>
</template>

<script setup>
// Component is reusable but the import statement has illegal argument I guess
const props = defineProps({
  imagePath: { type: String },
})

import logo from `./../assets/${props.imagePath}`
</script>

<template>
  <img :src="logo"/>
</template>

Saya juga mencuba pernyataan import dalam templat tetapi ia tidak menyusun kod:

<script setup>
const props = defineProps({
  imagePath: { type: String },
})
</script>

<template>
  <img :src="import `./../assets/${props.iconPath}`" />
</template>

Adakah saya terlepas sesuatu? Mungkin ada pemalam yang boleh membantu saya mencapai ini?

Answer 1

Saya juga mengalami masalah ini. Saya mencari ini dan menemuinya berdasarkan komen isu github ini, p>

Untuk maklumat lanjut tentang kandungan ini, sila lihat Ciri-ciri | Selepas beberapa carian, saya menjumpai contoh kod Vue 3 ini yang berkesan untuk saya

Pautan

setup() {
  const getImageUrl = (name) => {
        return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href
    }
  return { carouselData, getImageUrl }
}