Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
在解決問題之道上不斷前行
參考資料
把圖片放在assets中後,通常來說會使用這兩種寫法
<img src="@/assets/image/logo.jpg">
<img src="../assets/image/logo.jpg">
但只限於靜態圖片,如果想要動態取用圖片。
例如有10張圖片,檔名是1~10,例如001.jpg ~ 010.jpg
以前我偷懶會這樣處理:
放在 public 中,直接取用
<img src="`/image/${index}.jpg`">
但這種作法有些缺點,
如果換成assets中的話….
<img src="../assets/image/${index}.jpg`">
會失效。代表取用不到資源
如果找解決方式可能會找到 Vue2 時代的作法,加入 require,例如
<img :src="require(`.../assets/image/${index}.jpg`)" :alt="selectedDog">
但這個作法在Vue3 / Nuxt3 不能用了,因為Vite不支援。
這時要使用另一個Vite的API,import.meta.glob
我的理解,import.meta.glob
有點像是先整理所有引入資料夾中的檔案,建立成一個索引,然後透過key去對應檔名。
<script setup lang="ts">
const glob = import.meta.glob('@/assets/images/*.jpg', { eager: true })
</script>
去檢查 glob 可以看到以下類似資料
{
"/assets/images/logo_1`.jpg": {
"default": "/_nuxt/assets/images/logo_1.jpg"
},
"/assets/images/logo_2.jpg": {
"default": "/_nuxt/assets/images/logo_2.jpg"
},
"/assets/images/logo_3.jpg": {
"default": "/_nuxt/assets/images/logo_3.jpg"
}
}
這時我們用呼叫的圖檔名去尋找真實位置
<img :src="glob[`/assets/images/${index}.jpg`]" alt="" />
當然也有一些缺點
就看專案目的取決要使用何種作法囉。