Vite/Vue 3: „Undefinierte Anforderung' bei Verwendung der Bildquelle als Requisite

Question

Ich bin von Vue CLI auf Vite CLI und von der Composition API von Vue 3 auf die SFC Script Setup API umgestiegen.

Wie es vorher bei mir funktioniert hat

Wenn ich die offizielle Vue-CLI verwende, kann ich die Bildquelle importieren, indem ich den Dateinamen des Pfads über Requisiten übergebe:

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

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

Dann nennen Sie es so:

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

Nach der Migration zu Vite ist ein Fehler aufgetreten

Aber seit ich auf Vite CLI migriert bin, erhalte ich die Fehlermeldung „Uncaught ReferenceError: require is not Defined“. Meine Dateien verwenden jetzt eine Syntax für Skripteinstellungen wie diese:

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

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

Was ich versucht habe

Ich habe versucht, die Datei über einen relativen Pfad direkt aus dem Assets-Ordner zu importieren, und es hat funktioniert. Aber ich kann den Pfad der Requisiten nicht mit der Importanweisung angeben.

<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>

Ich habe auch die Importanweisung in der Vorlage ausprobiert, aber sie kompiliert nicht einmal den Code:

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

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

Habe ich etwas verpasst? Vielleicht gibt es ein Plugin, das mir dabei helfen kann?

Answer 1

我也遇到这个问题了。我对此进行了搜索，并根据此github问题评论找到了， p>

有关此内容的更多信息，请参阅功能 | Vite-静态资源

经过一番搜索，我找到了这个对我有用的 Vue 3 代码示例链接

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