Vue 3 Vite - Pautan imej dikemas kini masa nyata

Question

Saya menggunakan Vue 3 dan Vite. Selepas membina pengeluaran di Vite, saya menghadapi masalah dengan dynamic img src. Tiada masalah dengan static img src.

<img src="/src/assets/images/my-image.png" alt="Image" class="logo"/>< ;/pra>
<p>Ia berfungsi dengan baik dalam kedua-dua kes: apabila dijalankan dalam mod pembangunan dan selepas binaan vite. Tetapi saya mempunyai beberapa nama imej yang disimpan dalam pangkalan data yang dimuatkan secara dinamik (ikon menu). Dalam kes ini saya perlu menulis laluan seperti ini: </p>
<pre class="brush:php;toolbar:false;"><img :src="'/src/assets/images/' + menuItem.iconSource" />

(menuItem.iconSource mengandungi nama imej, seperti "my-image.png"). Dalam kes ini, ia berfungsi apabila menjalankan aplikasi dalam mod pembangunan tetapi tidak selepas binaan pengeluaran. Apabila Vite membina aplikasi untuk pengeluaran, laluan berubah (semua aset diletakkan ke dalam folder _assets). Sumber imej statik diproses oleh binaan Vite dan laluan akan diubah sewajarnya, tetapi sumber imej komposit tidak. Ia hanya mengambil /src/assets/images/ Saya boleh melihatnya dalam monitor rangkaian)). Saya cuba mencari penyelesaian dan seseorang mencadangkan menggunakan require() tetapi saya tidak pasti sama ada vite boleh menggunakannya.

Answer 1

2022 Kemas Kini: Vite 3.0.9 + Vue 3.2.38

Penyelesaian untuk pengikatan src dinamik:

1. Gunakan URL statik

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

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

2. Gunakan dinamik URL dan laluan relatif

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

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

3.Mempunyai dinamikURL dan pathmutlak

Disebabkan oleh pengehadan rollup, semua import mesti bermula relatif kepada fail import dan tidak boleh bermula dengan pembolehubah.

Anda mesti menukar alias @/ 替换为 /src

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

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

---

---

2022 Jawapan: Cepat 2.8.6 + Vue 3.2.31

Inilah perkara yang sesuai untuk saya pada binaan tempatan dan pengeluaran:

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

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

Sila ambil perhatian bahawa ia tidak berfungsi dengan SSR

---

Dokumentasi Vite: URL Baharu < /p>