vue.js - Parcel JS VUE dynamic images :src

Question

Vue js with parcel bundler cannot load dynamic images

<li
    class="list-group-item"
    v-for="(element, index) in carouselImages"
    :key="index">
    <img
         v-if="carouselImages.length"
         class="e-carousel-image"
         :src="element.image.filename" />
    <el-button
               type="danger"
               @click="removeImage(element._id)">X</el-button>
</li>

not working give us 404 when using relative path its working properly and changing path to hashed

src="../../../assets/uploads/carousel-1534888549715.jpg"

How we can solve it ?

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')]"/>