Vite/Vue 3 : "Exigence non définie" lors de l'utilisation de la source d'image comme accessoire

Question

Je suis passé de Vue CLI à Vite CLI et de l'API de composition de Vue 3 à l'API de configuration de script SFC.

Comment ça fonctionnait pour moi avant

Lorsque j'utilise la Vue CLI officielle, je peux importer la source de l'image en passant le nom de fichier du chemin via les accessoires :

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

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

Alors appelez-le comme ceci :

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

Erreur rencontrée après la migration vers Vite

Mais depuis que j'ai migré vers Vite CLI, j'ai eu l'erreur « Uncaught ReferenceError : require is not Defined ». Mes fichiers utilisent désormais la syntaxe des paramètres de script comme celle-ci :

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

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

Ce que j'ai essayé

J'ai essayé d'importer le fichier directement depuis le dossier Assets en utilisant un chemin relatif et cela a fonctionné. Mais je ne peux pas spécifier le chemin des accessoires à l'aide de l'instruction 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>

J'ai aussi essayé l'instruction import dans le modèle mais elle ne compile même pas le code :

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

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

Est-ce que j'ai raté quelque chose ? Peut-être existe-t-il un plugin qui pourrait m'aider à y parvenir ?

Answer 1

J'ai également rencontré ce problème. J'ai cherché ceci et je l'ai trouvé sur la base de ce commentaire sur le problème github, p>

Pour plus d'informations sur ce contenu, veuillez consulter Fonctionnalités | Vite - Ressources statiques

Après quelques recherches, j'ai trouvé cet exemple de code Vue 3 qui a fonctionné pour moiLien

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