Vue 3 Vite – In Echtzeit aktualisierte Bildlinks

Question

Ich verwende Vue 3 und Vite. Nachdem ich die Produktion in Vite aufgebaut hatte, stieß ich auf ein Problem mit dynamischem IMG SRC. Es gibt kein Problem mit static img src.

<img src="/src/assets/images/my-image.png" alt="Image" class="logo"/>< ;/pre>
<p>Es funktioniert in beiden Fällen einwandfrei: im Entwicklungsmodus und nach einem Vite-Build. Aber ich habe einige Bildnamen in einer dynamisch geladenen Datenbank gespeichert (Menüsymbole). In diesem Fall muss ich den Pfad so schreiben: </p>
<pre class="brush:php;toolbar:false;"><img :src="'/src/assets/images/' + menuItem.iconSource" />

(menuItem.iconSource enthält den Namen des Bildes, z. B. „my-image.png“). In diesem Fall funktioniert es, wenn die Anwendung im Entwicklungsmodus ausgeführt wird, jedoch nicht nach einem Produktions-Build. Wenn Vite die Anwendung für die Produktion erstellt, ändert sich der Pfad (alle Assets werden im Ordner _assets abgelegt). Statische Bildquellen werden vom Vite-Build verarbeitet und die Pfade werden entsprechend geändert, zusammengesetzte Bildquellen jedoch nicht. Es nimmt einfach /src/assets/images/ als Konstante und ändert es nicht (wenn die Anwendung 404 nicht gefunden für das Bild /src/assets/images/my-image.png ausgibt, Ich kann es im Netzwerkmonitor sehen)). Ich versuche eine Lösung zu finden und jemand hat vorgeschlagen, require() zu verwenden, bin mir aber nicht sicher, ob vite es verwenden kann.

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 文档：新网址