来自数据库的图像预览

Question

我正在尝试从数据库中预览图像，因为我将相册保存在 table 相册中，相册图像保存在 table 图像中并与关系连接，但我无法预览来自 table 图片，所以我在 2 table 之间添加关系并尝试预览图片，但它不适合我，出了点问题，但我无法理解

Blade.php

<tbody>
@foreach ($albums as $album)

<tr>
    <th scope="row">{{$album->id}}</th>
    <td>{{$album->name}}</td>
    <td>{{$album->category_id}}</td>
    <td><img style="width:5vw; hieght:5vh" src="{{$album->id}}" alt=""></td>
    <td>
        <a href="{{route('albums.show',$album->id)}}" class="btn btn-success">Show</a>
        @if (Auth::user()->role_id==1)
        <a href="{{route('albums.edit',$album->id)}}" class="btn btn-warning">Edit</a>
        <form action="{{route('albums.destroy',$album->id)}}" method="post" class="d-inline">
        @csrf
        @method('DELETE')
            <input type="submit" class="btn btn-danger" value="Delete" />
        </form>
@else
@endif

    </td>
</tr>
@endforeach
</tbody>

专辑控制器

    public function index()
    {
        $albums = Album::with('images')->get();
                return view('admin.albums.all',compact('albums'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        $albums=Album::all();
        $categories=Category::all();
        return view('admin.albums.create',compact('categories'));
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {

        $album=Album::create([
            'name'=>$request->name,
            'price'=>$request->price,
            'image'=>$request->image,
            'category_id'=>$request->category_id,
        ]);
        foreach($request->images as $image){
            $filename = $image->store('album');
            $images=Image::create([
                'album_id' => $album->id,
                'filename' => $filename
            ]);
        }
        $albums=Album::with('images')->get();
        return view('admin.albums.all',compact('albums'));
    }

图片模型

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Image extends Model
{
    use HasFactory;
    protected $fillable = ['album_id','filename'];

    public function images(){
        return $this->belongsTo(Album::class,'id');
    }
}

专辑型号

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Album extends Model
{
    use HasFactory;
    protected $fillable = [
        'name',
        'category_id',
    ];
    public function categories(){
        return $this->belongsTo(Category::class,'category_id','id');
    }
    public function images(){
        return $this->HasMany(Image::class,'filename','id');
    }
}

table 图片迁移

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->biginteger('album_id')->unsigned();
            $table->foreign('album_id')->references('id')->on('albums');
            $table->string('filename');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
};

Table 专辑迁移

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('albums', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->integer('category_id');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('albums');
    }
};

Answer 1

您的模型相册中的外键无效。在你的代码中 'filename'

images(){
        return $this->HasMany(Image::class,'filename','id');
    }

但是在图像 table 的迁移中，您设置了另一个外键 $table->foreign('album_id')->references('id')->on('albums');

Answer 2

<img style="width:5vw; hieght:5vh" src="{{$album->id}}" alt="">

您是否有带有该 ID 且末尾没有文件扩展名的图像，例如 {{ $album->id}}.png？
您的 Album 模型看起来不对

<?php
class Album extends Model
{
    public function images(){
        // Laravel can figure it out if you use the convention
        return $this->hasMany(Image::class);
    }
}

来自数据库的图像预览

Image Preview from DB

php

migration

relation

laravel