Image Preview from DB

I’m Trying to Preview images from database as im saving album in table albums and album images in table images and connecting with relation but i can’t preview the images from table image so i’m adding relations between the 2 tables and trying to preview the images but its not working with me something went wrong but i cannot figure it

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>

AlbumsController

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

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

    /**
     * Store a newly created resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    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'));
    }

Image Model

<?php

namespace AppModels;

use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;

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

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

Album Model

<?php

namespace AppModels;

use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;

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 images Migration

<?php

use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;

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 albums Migration

<?php

use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;

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

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

1. Do you have image with that id with no file extension at the end like {{ $album->id}}.png ?

2. Your Album model looks wrong

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