Vue js with parcel bundler cannot load dynamic images ?

[mkucaj1986]

❔ Question

Vue js with parcel bundler cannot load dynamic images when trying to load images with v-for loop

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

Not working: 404

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

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

🔦 Context

Would like to load dynamic images

💻 Code Sample

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

🌍 Your Environment

Software	Version(s)
Parcel 1.9.7
Node v8.11.4
npm/Yarn [email protected]
Operating System 18.04 LTS

[DeMoorJasper]

Not sure what vue turns this into, parcel only runs over valid html requires, it would probably be expected to become a js dependency but as it's not working that's probably not happening, which is pretty strange.

Someone will have to dig into what this code gets transpiled to by Vue and how we can handle this without editing the html parser

[mkucaj1986]

Thanks I found in other issue how should be resolve for now #1668 and It is your way It working correctly but eg. when we have a case like upload files to folder I cannot refresh / update list new files after completed upload so the list of files are old eg.

import images from './upload/*.*; or require(''./upload/*.*');

without this uploaded file :(

[DeMoorJasper]

@mkucaj1986 as far as I understand I think you might need a back-end server/service that gives you a list of all the images, this way you have full control over them.

Not sure if I completely understand though, if you don't need a list than you could use something like a cdn or just copy the images over to dist after build and before watch, that way you could use their normal paths...

[ouzhou]

@mkucaj1986
hey , i find a bug
if the img is used in css like background:url('./assets/logo.png')
parcel will say Uncaught (in promise) Error: Cannot find module 'assets/logo.png'
and remove css background:url it can work correctly
i dont know how to get file name both