Vue 3 Vite - Liens d'images mis à jour en temps réel

Question

J'utilise Vue 3 et Vite. Après avoir créé la production dans Vite, j'ai rencontré un problème avec Dynamic img src. Il n'y a aucun problème avec l'img src statique.

<img src="/src/assets/images/my-image.png" alt="Image" class="logo"/>< ;/pré>
<p>Cela fonctionne bien dans les deux cas : lors de l'exécution en mode développement et après une build rapide. Mais j'ai des noms d'images stockés dans une base de données chargée dynamiquement (icônes de menu). Dans ce cas, je dois écrire le chemin comme ceci : </p>
<pre class="brush:php;toolbar:false;"><img :src="'/src/assets/images/' + menuItem.iconSource" />

(menuItem.iconSource contient le nom de l'image, tel que "my-image.png"). Dans ce cas, cela fonctionne lors de l'exécution de l'application en mode développement mais pas après une version de production. Lorsque Vite crée l'application pour la production, le chemin change (tous les actifs sont placés dans le dossier _assets). Les sources d'images statiques sont traitées par la version Vite et les chemins seront modifiés en conséquence, mais pas les sources d'images composites. Il prend simplement /src/assets/images/ comme constante et ne le modifie pas (lorsque l'application renvoie 404 introuvable pour l'image /src/assets/images/my-image.png , Je peux le voir sur le moniteur réseau)). J'essaie de trouver une solution et quelqu'un a suggéré d'utiliser require() mais je ne sais pas si vite peut l'utiliser.

Answer 1

Mise à jour 2022 : Vite 3.0.9 + Vue 3.2.38

Solution pour la liaison src dynamique :

1. Utiliser une URL statique

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

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

2. Utilisez des URL dynamiques et des chemins relatifs

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

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

3.Avoir une URL dynamique et un cheminabsolu

En raison des limitations du cumul, toutes les importations doivent commencer par rapport au fichier d'importation et ne doivent pas commencer par une variable.

Vous devez changer d'alias

@/ 替换为 /src

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

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

---

---

Réponse 2022 : Quick 2.8.6 + Vue 3.2.31

Voici ce qui fonctionne pour moi sur les versions locales et de production :

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

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

Veuillez noter que cela ne fonctionne pas avec SSR

---

Documentation Vite : Nouvelle URL