Vite / Vue 3：使用圖像來源作為道具時“未定義要求”

Question

我從 Vue CLI 切換到 Vite CLI，從 Vue 3 的 Composition API 切換到 SFC Script setup API。

它以前對我來說是如何工作的

當我使用官方 Vue CLI 時，我可以透過 props 傳遞路徑的檔案名稱來匯入映像來源：

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

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

然後這樣稱呼它：

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

遷移到Vite後遇到的錯誤

但是自從我遷移到Vite CLI後，我出現了錯誤「Uncaught ReferenceError: require is not Defined」。我的文件現在使用腳本設定語法，如下所示：

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

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

我嘗試過的

我已經嘗試使用相對路徑直接從資產資料夾匯入文件，而且它有效。但我無法使用 import 語句指定 props 的路徑。

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

我還嘗試了模板中的 import 語句，但它甚至無法編譯程式碼：

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

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

我錯過了什麼嗎？也許存在一個插件可以幫助我實現這一目標？

Answer 1

我也遇到這個問題了。我對此進行了搜索，並根據此github問題評論找到了，

有關此內容的更多信息，請參閱功能 | Vite-靜態資源

經過一番搜索，我找到了這個對我有用的 Vue 3 程式碼範例連結< /p>#

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