CODEWITHSUNDEEP
imagevue.jsbundlerparcel
user887331
user887331

Reputation: 29

parcel with vue trouble with image paths

I am receiving data from a json file where each object has following data about a show/musical : 

{
    "Theatre": [
       {
            "name": "Hairspray",
            "type": "Musical",
            "role": "Dynamite",
            "director": "Sue Ellen Nielson",
            "company": "Stage 1 / East Bay Area",
            "year": "2012",
            "posterImage" : "hairsprayPoster.jpg"
        }  .....
]

}

on the Vue file I have : 

<ul class="show-gallery-list">
                   <li v-for="dataItem in myJson['Theatre']" >

                     {{dataItem.coverImage}} //this prints the path as a string
                     <img :src="dataItem.coverImage"> //this renders an empty image icon 

                </li> 
            </ul>

All the other data is accessible and renders. I have tried everything with v-bind:src I have tried to import the folder of images but that doesn't work either.

Will parcel not allow for me to render an image dynamically? Do I have to import all images ? Is this a bundling issue ?

Upvotes: 1

Views: 1450

Answers (1)

Chirag Ravindra
Chirag Ravindra

Reputation: 4830

This is actually not that straight forward to with parcelJS there is a whole GitHub issue conversation which discusses the possible alternatives to getting around this problem

The most promising from a glance appeared to be this plugin

A more naive way of achieving this would be to run your parcel build, then, create a new directory in the build files and copy over all your static assets there. If you run your parcel build folder from a HTTP server, your static files will also be there in the folder you created. You just need to make sure your path is correctly constructed.

Upvotes: 1

Related Questions