I have developed a frontend page that displays a list of books, with the data coming from the backend. The backend response includes image files, and I am struggling to bind these images to the image section of my template. I have the image paths from the database, but I need help converting these paths to display the actual images on the page.
DisplayNotes.vue
<template>
<div class="carddisplay-section">
<div v-for="book in books" :key="book.id" class="card">
<div class="image-section">
<div class="image-container">
<img :src="book.file" />
</div>
</div>
<div class="title-section">
{{book.name}}
</div>
<div class="author-section">
by {{book.author}}
</div>
<div class="price-section">
Rs. {{book.price}}<label>(2000)</label>
<button type="submit" @click="handlesubmit();">close</button>
</div>
</div>
</div>
</template>
<script>
import service from '../service/User'
export default{
data(){
return{
books:[{
id:1,
file:'i want to display image',
name:'Dont Make me think',
author:'sai',
price:'1500'
},]
}
},
methods:{
handlesubmit() {
service.userDisplayBooks().then(response => {
this.books.push(...response.data);
})
},
}
}
</script>
https://i.sstatic.net/rPV8l.png
https://i.sstatic.net/HMPmC.png
axios.js
import axios from 'axios'
// process.env.VUE_APP_AXIOS_URL=http://127.0.0.1:8000
axios.defaults.baseURL=process.env.VUE_APP_AXIOS_URL
axios.defaults.headers.common['Authorization']='Bearer'+ localStorage.getItem('token');
export default class AxiosService{
getData(url,data){
return axios.get(url,data).then(response =>{
return response;
})
}
}
User.js
import AxiosService from '../service/axios';
const axios=new AxiosService()
export default{
userDisplayBooks(data){
return axios.getData("/getBooks",data);
}
}