There are various methods to achieve this. Initially, I planned to save the image in my database and then call it from there to the view. However, I'm unsure about where to store the image and how to properly call it using :src="prizes.image_url".
The image is currently stored on the client-side.
{
id: 2,
name: "Merano MC400 Cello",
description: "Established in 2000, Merano have made it their mission to create affordable, beautifully crafted instruments. They offer brass, wind and stringed instruments all at reasonable prices. They have a large team of artisans who look over every instrument to ensure it maintains high standards. Many of their instruments are aimed at the beginner market but they also offer some fine examples of professional equipment as well.",
image_url: "../assets/images/c5Cor.png",
quantity: 3
}
getPrizes() {
axios.get('http://localhost:3000/prizes').then(response => {
this.prizes = response.data
console.log(response.data)
})
}
<div v-for="prize in prizes" :key="prize.id">
<div class="card_individual">
<div class="card-media-container">
<img class="card_image" :src="prize.image_url" alt="instruments"/>
</div>
<div class="card-detail-container">
<div class="card_title">Win a {{ prize.name }}</div>
</div>
<div class="modal-footer">
<router-link :to="{ name: 'PriceDetail', params: { prizeId: prize.id }}"><button type="button" class="btn btn-primary">{{ cards.btn_text }}</button></router-link>
</div>
</div>
</div>