Vue 3 Vite - 即時更新的圖片鏈接

Question

我正在使用 Vue 3 和 Vite。在 Vite 建置生產後，我遇到了動態 img src 的問題。對於靜態img src沒有問題。

<img src="/src/assets/images/my-image.png" alt="Image" class="logo"/>< ;/pre>
<p>它在兩種情況下都運作良好：在開發模式下運行時以及在 vite 建置之後。但我有一些圖像名稱儲存在動態載入的資料庫中（選單圖示）。在這種情況下，我必須像這樣寫路徑：</p>
<pre class="brush:php;toolbar:false;"><img :src="'/src/assets/images/' menuItem.iconSource" />

（menuItem.iconSource 包含映像的名稱，如「my-image.png」）。 在這種情況下，它在開發模式下運行應用程式時有效，但在生產建置後無效。當 Vite 為生產環境建立應用程式時，路徑會發生變更（所有資源都放入 _assets 資料夾中）。靜態圖片來源是由Vite build處理的，路徑也會隨之改變，但合成圖片來源則不然。它只是將/src/assets/images/ 作為常數並且不會更改它（當應用程式拋出404 not found for image /src/assets/images/my-image.png 時，我可以在網路監視器中看到它） ）。 我試圖找到解決方案，有人建議使用 require() 但我不確定 vite 是否可以使用它。

Answer 1

2022 年更新：Vite 3.0.9 Vue 3.2.38

動態src綁定的解決方案：

1。使用靜態 URL

<script setup>
import imageUrl from '@/assets/images/logo.svg' // => or relative path
</script>

<template>
  <img :src="imageUrl" alt="img" />
</template>

2。使用動態 URL 和相對路徑

<script setup>
const imageUrl = new URL(`./dir/${name}.png`, import.meta.url).href
</script>

<template>
  <img :src="imageUrl" alt="img" />
</template>

3.具有動態 URL 和絕對路徑

由於匯總限制，所有導入都必須相對於導入檔案開始，並且不應以變數開始。

您必須將別名 @/ 替換為 /src

#

<script setup>
const imageUrl = new URL('/src/assets/images/logo.svg', import.meta.url)
</script>

<template>
  <img :src="imageUrl" alt="img" />
</template>

---

---

2022年答案：Quick 2.8.6 Vue 3.2.31

以下是對我來說適用於本地和生產建置的方法：

<script setup>
const imageUrl = new URL('./logo.png', import.meta.url).href
</script>

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

請注意，它不適用於 SSR

---

Vite 文件：新網址