Parcel JS VUE dynamic images :src

Question

Vue js with parcel bundler cannot load dynamic images

Answer 1

Slightly old, but this is how I just did it, maybe it will help.

Imagine you're trying to do the following, where some parts of the path are dynamic:

<img src="../../assets/img/homeActive.png"/>

You would naturally think to do something like:

<img :src="`../../assets/img/${item.icon}${item.active ? 'Active' : 'Inactive'}.png`"/>

And expect it rendered like:

<img src="homeActive.fbba0284.png"/>

..But because parclejs looks at your code to bundle and move assets into ./dist it won't see the dynamic image, so it won't get moved.

A solution is to import all the images, then use that to access the real path:

<script>
import images from '../../assets/img/*.png';

export default {
  data() {
    return {
      images,

  // ...

images variable will contain the mapping to the actual image:

{
    ...
    "homeActive": "/homeActive.fbba0284.png",
    "homeInactive": "/homeInactive.cf1229b4.png",
    ...
}

which you can then use like this:

<img :src="images[item.icon + (item.active ? 'Active' : 'Inactive')]"/>