Vue.js show dynamic images is not working

Question

I'm a beginner at vue.js and I'm trying to show images dynamically but I'm having an issue with displaying them dynamically, if I change them manually it works I found many similar problems with a bit of difference none of them have helped me

this is my structure:

-src --assets ---pizza ----pizza-1.jpg ----pizza-2.jpg ---hamburger ----hamburger-1.jpg ----hamburger-2.jpg ---french-fries ----french-fries-1.jpg ----french-fries-2.jpg --components --DBjson ---main.json

I'm trying to make this loop

`<div class="holder" v-for="restaurant in restaurants"> <img :src="getImage(restaurant.name, restaurant.mainImage)"/> </div> export default { name: "restaurant", data() { return { restInfo: this.$attrs.restData, }; }, methods: { getImage(folderName, imageName) { let image = require.context("@/assets/"); return image("./" + folderName + "/" + imageName); }, }, };`

my JSON file

 { "id": 1, "name": "pizza", "price": "$10", "mainImage": "pizza-1.jpg", "images": ["pizza-2.jpg", "pizza-1.jpg"], },

In <template> you're calling getImage but in controller you define getImageUrl. — tao
– tao, Commented Oct 17, 2022 at 20:58
Can you try with image("/" + folderName + "/" + imageName) ? Without . dot inside image() — Sabbir Sobhani
– Sabbir Sobhani, Commented Oct 18, 2022 at 17:24

yoduh · Accepted Answer · 2022-10-18 17:13:02Z

1

getImage should require and return the image using the image's full relative filepath

Vue 2.x

getImage(folderName, imageName) { return require(`@/assets/${folderName}/${imageName}`) }

Vue 3.x + Vite

Vite as far as I know can't handle '@' alias for this particular task so be sure to set your path accordingly

getImage(folderName, imageName) { return new URL(`../assets/${folderName}/${imageName}`, import.meta.url).href; }

edited Oct 18, 2022 at 17:13

answered Oct 17, 2022 at 23:57

yoduh

15.5k2 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ahmed Ismail Over a year ago

I made it this way, it didn't work

yoduh Over a year ago

are you using Vue 2 or Vue 3?

Ahmed Ismail Over a year ago

I’m using Vue 3

yoduh Over a year ago

I've updated my answer with the Vue 3 solution

Ahmed Ismail Over a year ago

unfortunately, it doesn't work , bro thanks for your efforts I really got you struggling with my issues, I’m gonna drop this project out cause I’m stuck with this problem

Collectives™ on Stack Overflow

Vue.js show dynamic images is not working

1 Answer 1

Vue 2.x

Vue 3.x + Vite

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Vue 2.x

Vue 3.x + Vite

5 Comments

Related