How to access images inside a public folder in Laravel?

If you have an image stored in the public folder of Laravel, you can access or, display it in the browser using various methods. In this article, we will learn some of these methods.

Assume we have the image of a flower (flower.jpg) stored in the Public folder as shown below

Now let us use the image to view inside the browser.

Using url() method

The url() helper function helps to return you the full path i.e it will add the HTTP or HTTPS and return the complete path for the given URL. For example, consider the following URL

echo url()->current();

The above will give the current URL you are working on. http://127.0.0.1:8000/test

Let's consider another example

echo url('/images/flower.jpg');

The output for the above line is http://127.0.0.1:8000/images/flower.jpg.

Example

Now let us see a complete PHP example to display the image stored in the public folder −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: 'Nunito', sans-serif;
      }
   </style>
</head>
<body class="antialiased">
   <div>
      <img src="{{url('/images/flower.jpg')}}" alt="Image" width="300" height="250"/>
   </div>
</body>
</html>

The image is displayed using following code −

<img src="{{url('/images/flower.jpg')}}" alt="Image" width="300" height="250"/>

The output of the above code is as follows –

Using URL::to() method

The URL::to() method gives the starting path of the URL for example http://127.0.0.1:8000 or https://127.0.0.1:8000

You can also access images by using URL::to('/') inside your blade template as shown below −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: 'Nunito', sans-serif;
      }
   </style>
</head>
<body class="antialiased">
   <div>
      <img src="{{ URL::to('/') }}/images/flower.jpg" alt="Image" width="300" height="250"/>
   </div>
</body>
</html>

On execution, the above program generates the following output −

Using the asset() helper function

The asset() helper function also provides the full URL starting from http or https. For example, consider the following line −

echo asset('images/flower.jpg');

This will print the complete URL of the image as −

http://127.0.0.1:8000/images/flower.jpg

Follwinbg is the complete exampole to displauy the image in the browser usinbg the asset() function −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: 'Nunito', sans-serif;
      }
   </style>
</head>
<body class="antialiased">
   <div>
      <img src="{{ asset('images/flower.jpg') }}" alt="Image" width="300" height="250"/>
   </div>
</body>
</html>

The output of the above code is -of the above code is −

Using public_path() method

The public_path() method will give the full URL of the files in the public/ folder. This method is specially used to access the files from the public folder.

The following examples used the public_path() method of the File class and fetch all the images available inside the public folder and the same is displayed in the browser.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;

class UserController extends Controller {
   public function index() {
      $images = \File::allFiles(public_path('images'));
      return View('test')->with(array('images'=>$images));
   }
}

Test.blade.php

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: 'Nunito', sans-serif;
      }
   </style>
</head>
<body class="antialiased">
   <div>
      <ul>
         @foreach ($images as $image)
            <li style="width:300px;display:inline-block;margin:5px 0px">
            <img src="{{asset('images/'. $image->getFilename())}}"width="300" height="250">
            </li>
         @endforeach
      </ul>
   </div>
</body>
</html>