title: Vue 3 Vite - dynamic img src
body: <p>I'm using Vue 3 with Vite. And I have a problem with dynamic img src after Vite build for production. For static img src there's no problem.</p>
  <pre><code>&lt;img src=&quot;/src/assets/images/my-image.png&quot; alt=&quot;Image&quot; class=&quot;logo&quot;/&gt;
  </code></pre>
  <p>It works well in both cases: when running in dev mode and after vite build as well. But I have some image names stored in database loaded dynamically (Menu icons). In that case I have to compose the path like this:</p>
  <pre><code>&lt;img :src=&quot;'/src/assets/images/' + menuItem.iconSource&quot; /&gt;
  </code></pre>
  <p>(menuItem.iconSource contains the name of the image like &quot;my-image.png&quot;).
  In this case it works when running the app in development mode, but not after production build. When Vite builds the app for the production the paths are changed (all assests are put into <code>_assets</code> folder). Static image sources are processed by Vite build and the paths are changed accordingly but it's not the case for the composed image sources. It simply takes <code>/src/assets/images/</code> as a constant and doesn't change it (I can see it in network monitor when app throws 404 not found for image /src/assets/images/my-image.png).
  I tried to find the solution, someone suggests using <code>require()</code> but I'm not sure vite can make use of it.</p>