我正在尝试从我的后端 api 获取图像。但我无法做到这一点。请帮助我答案

【问题标题】：I am trying to get images from my backend api. But i am not able to perform that.please help me我正在尝试从我的后端 api 获取图像。但我无法做到这一点。请帮助我
【发布时间】：2021-09-16 08:15:11
【问题描述】：

我正在尝试上传一张图片及其详细信息。但我可以获得所有详细信息，但只有图像未显示在浏览器中。我将 php laravel 用于后端 api。图片位于后端 laravel 的 Storage/app/apiDocs 文件夹中。我编写了 displayBooks 函数来获取 laravel 中的所有书籍。但在前端只有图像不显示。这是输出的截图。

检查元素的屏幕截图。 DisplayBooks.vue

<template>
<div class="bookdisplay-section">
    <div class="book" v-for="book in books" :key="book.id">
        <div class="image-section">
            <div class="image-container">
                <img v-bind:src="book.file" />
            </div>
        </div>
        <div class="name-section">
            {{book.name}}
        </div>
        <div class="author-section">
            by {{book.author}}
        </div>
        <div class="price-section">
            Rs. {{book.price}}<label>(2000)</label>
            <button v-if="flag" type="submit" @click="handleSubmit();Togglebutton();">close</button>
        </div>
        <div class="rating">
            <p>4.5<i class="fas fa-star"></i></p>
        </div>
        <div class="quantity">
            <p>(20)</p>
        </div>
    </div>
</div>
</template>
<script>
import service from '../service/User'
export default{
    name: 'DisplayBooks',
    data(){
        return{
            flag: true,
            books: [{
                id: 1,
                file: 'display image',
                name: 'Dont make me Think',
                author : 'Joseph',
                price : '1500',
            },]
        }
    },
    methods:{
        Togglebutton(){
            this.flag = !this.flag;
        },
        async handleSubmit(){
            service.userDisplayBooks().then(response => {
                this.books.push(...response.data);
            })
        },
    }
}
</script>
<style lang="scss" scoped>
@import "@/Styles/DisplayBooks.scss";
</style>

FileController.php

<?php

namespace App\Http\Controllers;
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
// use Illuminate\Http\Request;
use App\Http\Resources\Books as BooksResource;
use App\Models\Books;
use App\Models\User;
use Illuminate\Contracts\Filesystem\Filesystem;
use League\Flysystem\AwsS3v3\AwsS3Adapter;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\DB;

use Illuminate\Http\Request;

class FileController extends Controller
{
    
    public function displayBooks()
    {
        $books=Books::all();
        return User::find($books->user_id=auth()->id())->books; 
    }

    function upload(Request $request){
        $book = new Books();
        $book->price=$request->input('price');
        $book->name=$request->input('name');
        $book->quantity=$request->input('quantity');
        $book->author=$request->input('author');
        $book->description=$request->input('description');
        $book->file=$request->file('file')->store('apiDocs');
        
        $book->user_id = auth()->id();
        $book->save();
        return ["result"=>$book];
        // return [$book];        
    }


    public function updateBook(Request $request, $id)
    {
        $book = Books::find($id);
        if($book->user_id==auth()->id()){
            dd($request->all());
            $book->price=$request->input('price');
            $book->name=$request->input('name');
            $book->quantity=$request->input('quantity');
            $book->author=$request->input('author');
            $book->description=$request->input('description');
            // $book->file=$request->file('file')->store('apiDocs');
            $book->save();
            return[$book];
            
        }
        else
        {
            return response()->json([
                'error' => ' Book is not available with this id'], 404);
        }
}

【问题讨论】：

我快疯了，想弄清楚你的 displayBooks 方法实际上做了什么。你能解释一下吗？
我认为您的displayBooks 有问题，但无论如何，您能否提供src 属性之一的值？使用检查元素
你好@MrEduar...这个displayBooks函数用于根据user_id获取所有书籍...书籍是通过上传函数创建的。
你好@MohammadMirsafaei ..in 检查元素也即将到来，但它没有反映在仪表板中。我正在编辑我的帖子并提供检查屏幕截图。

标签： php html css laravel vue.js

【解决方案1】：

仅当文件的可见性设置为公开时，图像才可见。这里的最佳做法是将图像上传到公共磁盘（https://laravel.com/docs/8.x/filesystem#the-public-disk）。确保使用php artisan storage:link 创建符号链接。

这意味着您也应该将上传功能更改为：

$request->file('file')->store('fileName', 'public');

如果此项目将公开可用，请考虑将请求验证添加到存储/更新功能。

【讨论】：