As a newcomer to vue.js, I am facing a challenge in dynamically displaying images. Manually changing the images works fine, but I'm running into issues with dynamic display. I've come across similar problems online, but none of the solutions seem to solve my particular problem.
This is how my directory structure looks:
-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 am attempting to create 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);
},
},
};`
Here is a snippet from my JSON file:
{
"id": 1,
"name": "pizza",
"price": "$10",
"mainImage": "pizza-1.jpg",
"images": ["pizza-2.jpg", "pizza-1.jpg"],
},