Блог

В интерфейсе я разработал одну страницу ,на которой отображаются все книги, данные поступают из бэкэнда ,Ответ , который поступает из бэкэнда ,включает файл(изображение), как привязать это изображение к разделу изображений, в моем случае я не могу привязать это изображение к разделу шаблонов, пожалуйста, помогите мне получить это изображение и отобразить это изображение, я получаю путь к изображению, который поступает из базы данных, пожалуйста, помогите мне преобразовать этот путь в изображение на моей странице..

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">
                <!--{{book.file}}-->
<img url={{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>
 

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);
    }
}
 

Каков формат вашего файла изображения? если это http-ссылка , попробуйте использовать src не url в теге img :

 <img :src="book.file" />
 

 <img v-bind:src="book.file" />
 

привязка изображения к ссылке напрямую формирует данные