在视图中显示存储中的图像

Question

I have a form with multiple fields which stores information including an image upload. There is also an edit view:

Route::PUT('/link/{link}', function (Request $request, Link $link) {
  $request->validate([
    'name' => 'required|max:255',
    'title' => 'required|max:255',
    'cell' => 'required|max:255',
    'tel' => 'required|max:255',
    'email' => 'required|max:255',
    'website' => 'required|url|max:255',
    'location' => 'required|max:255',
    'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
  ]);

  $img = $request->file('image');

  $newfilename = $request->name;

  $img->move(public_path("/uploads"), $newfilename);

  $link->update($request->all());

  return redirect('/');
});

The initial submit and edit works fine along with changing the image file name and storing it in the uploads folder.

The path generated being:

public/uploads/exampleFileName.jpg

The problem here is when it comes to displaying the image in the home view. The code below generates a 404 not found with an additional /tmp/ path which I have no idea about where it comes from.

Code in home view:

@foreach ($links as $link)
    <div class="link-box">
      <h5 class="off-white-txt">Card [# {{ $link->id }}]</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Name: </span>{{ $link->name }}</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Title: </span>{{ $link->title }}</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Cell: </span>{{ $link->cell }}</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Tel: </span>{{ $link->tel }}</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Email: </span>{{ $link->email }}</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Website: </span>{{ $link->website }}</h5>
      <h5 class="off-white-txt"><span class="pool-blue-txt">Location: </span>{{ $link->location }}</h5>

  <img src="{{url('uploads'.$link->image) }}" class="off-white-txt">
</div>

The error message in the console:

GET http://192.168.10.10/uploads/tmp/phpdtnTcw 404 (Not Found)

My question is the following; How could I edit my code to point to the correct path and display the image?

Thank you in advance.

Answer 1

if you are using storage folder to save images then you should use Storage::url

make sure to run command php artisan storage:link

  <img src="{{ Storage::url($link->image) }}" class="off-white-txt">