How to Show an Image From Storage in Laravel Blade

When working with Laravel, displaying images stored in the storage folder is a common requirement.

By default, Laravel expects images to be served from the public folder. In this guide, we will explore two methods to overcome this limitation and efficiently display images from the storage folder.

Let’s get started!

Method 1: Showing an Image From Storage Using Symbolic Links

Symbolic links provide a convenient way to expose the contents of the storage folder publicly. This method works on Linux and Mac, and on Windows (Version 10 or newer).

1. Open your terminal and navigate to your Laravel project.
2. Run the following Artisan command:

php artisan storage:link

This creates a symbolic link from public/storage to storage/app/public, allowing files in the storage folder to be accessed via the public/storage URL.

Note: You might encounter an “error: link already exists”; no worries, it means it’s set up correctly!

3. Add your image in blade:

<img src="{{ url('storage/images/your-image-name.jpg') }}" alt="" title="">

4. Start the application by running:

php artisan serve

5. Open your browser at http://127.0.0.1:8000/ and verify the page loads with the image.

Method 2: Showing an Image From Storage Using Route + Controller

1. Create a controller named ImageController by running:

php artisan make:controller ImageController

2. Open the generated ImageController.php and add a show() method:

<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\Storage;

class ImageController extends Controller
{
    /**
     * Display the specified image.
     *
     * @param  string  $imageName
     * @return \Illuminate\Http\Response
     */
    public function show($imageName)
    {
        // Construct the full path to the image within the storage directory
        $path = storage_path("app/public/images/{$imageName}");

        // Check if the image exists; if not, return a 404 response
        if (!Storage::exists("public/images/{$imageName}")) {
            abort(404);
        }

        // Return the image as a response
        return response()->file($path);
    }
}

3. Define a route in web.php:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

// Add a route that can load an image from storage based on a parameter
Route::get('/images/{imageName}', [ImageController::class, 'show'])->name('image.show');

4. In your Blade file, use the following to display the image:

<img src="{{ route('image.show', ['imageName' => 'your-image-name.jpg']) }}" alt="Your Image">

5. Start the application by running:

php artisan serve

6. Open your browser at http://127.0.0.1:8000/ and verify the page loads with the image.

Conclusion

Congratulations! You’ve successfully learned two approaches to display images from the storage folder in Laravel.

In summary, the php artisan storage:link method provides a quick solution with symbolic link creation, while the route and controller method offer more dynamic image loading capabilities.

I hope these methods prove useful in your projects. Happy coding!

References

• File Storage: The Public Disk (Laravel Documentation)
• Helpers: asset() Laravel Documentation()