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 ?

Try with _require_: `:src="require('element.image.filename')"` — Vucko, Aug 22 '18 at 09:16
https://ibb.co/cJxBSe VM4183:37 [Vue warn]: Error in render: "Error: Cannot find module './public/carousel-1534929610602.jpg'" — Michal Kucaj, Aug 22 '18 at 09:34
Your path is wrong as it's looking in the _public_ folder. What is `element.image.filename` ? — Vucko, Aug 22 '18 at 09:36
Try then `:src="'../../../assets/uploads/' + element.image.filename"` — Vucko, Aug 22 '18 at 09:42
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/178517/discussion-between-michal-kucaj-and-vucko). — Michal Kucaj, Aug 22 '18 at 09:47

Lawrence Cherone · Answer 1 · 2019-11-05T13:45:48.237

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

score 0 · Answer 2 · answered Mar 24 '21 at 19:01

I'm avoiding ParcelJS entirely for assets, and that works well for me.

My build script in package.json copies the asset directories into my build directory.

  "scripts": {
    "copy-assets": "cp -r {manifest.json,images} dist",
    "watch": "rm -rf dist && mkdir dist && npm run copy-assets && parcel watch src/index.js",
    "build": "rm -rf dist && mkdir dist && npm run copy-assets && parcel build src/index.js"

In my Vue files, I don't have to deal with dynamic filenames for images/etc:

                          <img
                            v-else
                            class="generic-logo"
                            src="../images/icon_128.png"
                          />

Parcel JS VUE dynamic images :src

2 Answers2

Linked