Vue 3 Vite - Real-time updated image links

Question

I'm using Vue 3 and Vite. After building production in Vite, I ran into an issue with dynamic img src. There is no problem with static img src.

<img src="/src/assets/images/my-image.png" alt="Image" class="logo"/>< ;/pre>
<p>It works fine in both cases: when running in development mode and after a vite build. But I have some image names stored in a dynamically loaded database (menu icons). In this case I have to write the path like this: </p>
<pre class="brush:php;toolbar:false;"><img :src="'/src/assets/images/' menuItem.iconSource" />

(menuItem.iconSource contains the name of the image, such as "my-image.png"). In this case it works when running the application in development mode but not after a production build. When Vite builds the application for production, the path changes (all assets are placed into the _assets folder). Static image sources are processed by the Vite build and the paths will be changed accordingly, but composite image sources are not. It just takes /src/assets/images/ as a constant and does not change it (when the application throws 404 not found for image /src/assets/images/my-image.png , I can see it in network monitor)). I'm trying to find a solution and someone suggested using require() but I'm not sure if vite can use it.

Answer 1

2022 Update: Vite 3.0.9 Vue 3.2.38

Solution for dynamic src binding:

1. Use static URL

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

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

2. Using Dynamic URLs and Relative Paths

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

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

3.Have dynamic URLs and absolutepaths

Due to aggregation limitations, all imports must start relative to the import file and should not start with a variable.

You must replace the alias @/ with /src

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

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

---

---

2022 Answer: Quick 2.8.6 Vue 3.2.31

Here's what works for me on local and production builds:

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

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

Please note that it does not work with SSR

---

Vite Documentation: New URL