I am currently working on a project that involves displaying Pizza items with their respective images. Each Pizza object is stored in the database along with an imgUrl field. Strangely, the images are not showing up on the page, although I can see the alt text that I provided. When I check the console, the image link appears to be correct.
Currently, the data in the imgUrl field of the database looks something like ../assets/images/pizza.jpg. Would it make more sense to save
require(../assets/images/pizza.jpg)<template>
<div>
<div class="class">
<span><h1>All you can eat Menu.</h1></span>
<div class="container">
<div class="box" v-for="item in pizzaList" :key="item.id">
<div>
<img :src="item.imgUrl" alt="Image"/>
<div>
<a class="btn" @mouseenter="$event.currentTarget.style.background = '#EF6B7F'"
@mouseleave="$event.currentTarget.style.background = '#e31837' ">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data () {
return {
pizzaList: []
}
},
mounted: function () {
axios.get('http://localhost:8081/api/pizza/all')
.then(response => {
this.pizzaList = response.data;
})
.catch(e => {
console.log(e);
})
}
}
</script>
I have already referred to some articles on Stack Overflow regarding similar issues:
- Vue and API: Displaying Image
- Image path in Vue JS
- How to reference static assets within vue javascript
Although these resources provide guidance on encapsulating hardcoded URLs with require, they do not address the scenario where the URL is fetched from the database. How should we incorporate require in the HTML tag in such cases? Your insights would be greatly appreciated. Thank you.