How to retrieve images from storage folder to view in blade?

Question

I'm trying to access images from storage folder to display in blade view. the images are in storage/app/photos.

I have run a command php artisan storage:link but still no luck showing images.

Here is my home controller

public function detailPro($id) {
    $products=DB::table('products_photos')
         ->join('products','products_photos.product_id','products.id')
         ->get();
         //dd($products);
    return view('front.product_detail', compact('products'));
}

here is my detail.blade.php

@foreach($products as $product)
   <div class="col-md-6 col-xs-12">
   <div class="thumbnail">
     </div>
     <img src="{{ url('storage/app/photos/'.$product->filename) }}" style="width:200px;" alt="">
   </div>
@endforeach

this is the logic of how i save images to db

public function store(Request $request)
{
    $product = Product::create($request->all());
    foreach ($request->photos as $photo) {
        $filename = $photo->store('photos');
        ProductsPhoto::create([
            'product_id' => $product->id,
            'filename' => $filename
        ]);
    }
    return 'Upload successful!';
}

the image doesn't appear and the url shown is this "http://127.0.0.1:8000/storage/app/photos/photos/xPNOQQTaTjPaKUClAHOxx7NEjsNLHguhVuAryZEg.jpeg".

Salman Zafar Salman Zafar · Accepted Answer · 2019-07-02T12:36:14

You should check this and you can use Storage::url('url') if you have run php artisan storage:link

@foreach($products as $product)
   <div class="col-md-6 col-xs-12">
   <div class="thumbnail">
     </div>
     <img src="{{  Storage::url($product->filename) }}" style="width:200px;" alt="">
   </div>
@endforeach

Change your store method to

public function store(Request $request)
{
    $product = Product::create($request->all());
    foreach ($request->photos as $photo) {
        $filename = $photo->store('public/photos');
        ProductsPhoto::create([
            'product_id' => $product->id,
            'filename' => $filename
        ]);
    }
    return 'Upload successful!';
}

How to retrieve images from storage folder to view in blade?

3 Answers