Store & Retrieved Images in Laravel explained

If you are just starting out with Laravel, knowing where to store your images and how to retrieved them can be a pain, but not to worry because in this short tutorial I will discuss everything you need to know about storing and retrieving images in Laravel;

• Where to store your images
• How to store your images to a folder from a controller
• How to retrieve and display them in your page

In this tutorial, we shall be using Laravel 5, but the steps explain here should work in a Laravel 4 application

Where to store images in Laravel

Figuring out where to put images for users who are just starting out with Laravel can be confusing and it wasn’t easy for me personally. Looking at the architecture of a Laravel application you will find that there is a public folder where images can be stored and also a storage directory where images can be stored, now where you put your images depends on the type of image you are working with. Laravel did a good job in explaining how the public and storage directory works in their documentation and you should go check it out after here. Now to answer the above question

“Your images (assuming they are meant to be seen by visitors e.g. Logo, background images, etc) need to be in a public place. Since only the public folder should be published to the web, you could create a folder there and publish the files into that.”

stechmax/public/yourfolder

in the example above stechmax is considered our root folder

Alternatively you should store your images in the

stechmax/storage/app/public

if this images are intended to be private, example of such are users profile images, products images, etc.

Also keep in mind your hosting provider needs to be able to use SSH and create symlinks then you can run php artisan storage:link This will create a link from storage in your public folder to storage/app/public in your Laravel project.

How to retrieve an image from a request and save to the storage/app/public directory

if you want to accept image upload in your application then you need to know how to store these image to your storage/app/public directory.

Again Laravel provides good docs to in https://laravel.com/docs/5.7/filesystem#file-uploads

Here is the code to store images, for better understanding of the code, visit the Laravel documentation above, there you will find all you need to know.

 public function update(Request $request)
    {
        $path = $request->file('avatar')->store('avatars');

        return $path;
    }

In the above code, we are storing the image to an avatars folder

How to retrieve images stored to the storage public directory

How can I retrieve my images from the storage directory? while most persons will complain, I am writing my code correctly but the image is still not showing up. and again this has been thoroughly explained in the Laravel documentation here

In other to work with the storage public directory, you should run this code

php artisan storage:link

The above code is to create the symbolic link, that will then allow you to reference files from your storage directory.

Retrieving this files in your blade files should be easy with this helper method

asset()

The asset function generates a URL for an asset using the current scheme of the request (HTTP or HTTPS):

Retrieve image using Laravel Blade

<img src="{{asset('storage/thumbnails/default.jpg')}}">

The example above will retrieve an image from the storage/thumbnails directory titled default.

Solution to retrieve image from your controller

return asset('storage/logos/default.jpg');

Putting it all together, here is the code you need to store and display your images from the storage directory

Step one: begin by creating a symbolic link by typing this code on your console.

php artisan storage:link

Step Two: Use this code to upload an image to the avatar’s folder which should be located here storage/app/public/avatars

public function update(Request $request)
    {
        $path = $request->file('avatar')->store('avatars');
        return $path;
    }

Step Three: Display the image to your page

<img src="{{asset('storage/avatars/typethefilenamehere.jpg')}}">