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 ?

Selfdeceit

Try with require: :src="require('element.image.filename')" – Oid

with require Error in render: "Error: Cannot find module – Selfdeceit

ibb.co/cJxBSe VM4183:37 [Vue warn]: Error in render: "Error: Cannot find module './public/carousel-1534929610602.jpg'" – Selfdeceit

Your path is wrong as it's looking in the public folder. What is element.image.filename ? – Oid

element.image.filename = 'carousel-1534929610602.jpg' – Selfdeceit

Try then :src="'../../../assets/uploads/' + element.image.filename" – Oid

Let us continue this discussion in chat. – Selfdeceit

What was the answer to all this? – Pothook

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

Afoul

Answer 2

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"
                          />

Tippett