Cannot fetch image from storage directory in laravel

Question

The image is not shown when I display it in the index page.

My view file (index.blade.php):

<div class="row">
    @if(App\News::count() > 0)
      @foreach($news as $n)
        <div class="col-md-8 panel border-right">
          <br />
          <img src="{{ asset('storage/images/news/'. $n->image) }}" width="200px" height="100px">
 --$n->image returns News_1.jpg which is the image name stored in the storage directory.
          <h1>First Div</h1>
        </div>
      @endforeach
   @endif
       <div class="col-md-4">
         <h1>Second Div</h1>
       </div>
</div>

My controller:

    public function store(Request $request)
{

    $this->validate($request, 
    [

        'head' => 'required|max:191',
        'title' => 'required|max:191',
        'body' => 'required',
        'pic' => 'required'

    ]);
    $filename="";
    $extension="";

    if($request->hasFile('pic'))
    {

        if((News::orderBy('id', 'desc')->first()) != null)
        {
            $id = ((News::orderBy('id', 'desc')->first()->id)+1);
            $filename = "News_" . $id;
        }
        else
        {
            $filename = "News_" . 1;
        }
        $extension = $request->pic->getClientOriginalExtension();
        $filename = $filename . "." . $extension;

        //return $request->pic->getClientOriginalName();
        $request->pic->storeAs('public/images/news', $filename);


    }
    else
    {
        return redirect()->back()->withInput(Input::all())->withErrors(['message' => 'Please select a valid file.']);
    }

    $news = new News;
    $news->head = $request->head;
    $news->title = $request->title;
    $news->body = $request->body;
    $news->image = $filename;

    $news->save();

    Session::flash('success', 'The record was successfully saved.');

    return redirect()->route('news.index');


}

I have already linked the storage directory with the public directory:

My directory structure:

The images are stored properly in both the Application and database but it cannot be displayed properly, when I run the app, I get the following view:

When open the image in new tab, I see the following address bar:

This is the local driver configuration:

Any help is appreciated in advance.

Where does `cricket` come from in the URL? Are you trying to run the project in a subfolder? — Snapey, Jun 01 '18 at 07:24
What if you change the url to `/cricket/public/storage/images/news/{{ $n->image }}`? Does that show you the image? — Douwe de Haan, Jun 01 '18 at 07:55
Yes, it show, but I do not think this is the proper way of doing it. — Abdul Raheem Ghani, Jun 01 '18 at 08:02
https://stackoverflow.com/questions/30191330/laravel-5-how-to-access-image-uploaded-in-storage-within-view#30191854 There you go, this answer will help you :) — Pol Lluis, Jun 01 '18 at 08:08
So the problem is that htdocs is your __document root__ when it should be the laravel public folder. — Snapey, Jun 02 '18 at 07:56
I told him that, refuses to properly config his server or use ´php artisan serve´ for an easier solution — Pol Lluis, Jun 02 '18 at 10:55

score 1 · Answer 1 · answered Jun 01 '18 at 07:28

1

If your current route is /cricket and you reference an image with 'storage/images/news/news1.jpg' then the web browser is going to assume that this image is relative to the cricket resource.

Your image src needs to start with either the full URL or a / to indicate it is relative to the root folder

In this case I would hard code the URL since you have hard coded it in the asset helper anyway

<img src="/storage/images/news/{{ $n->image }}"

answered Jun 01 '18 at 07:28

Snapey

3,604
1
21
19

I did it but still I cannot view the image, the URL is now changed to : http://localhost:81/storage/images/news/News_1.jpg – Abdul Raheem Ghani Jun 01 '18 at 07:32
Find your image by modifying the address bar. Is it `/public/storage/images/news/News_1.jpg` or `/cricket/public/storage/images/news/News_1.jpg` – Snapey Jun 02 '18 at 07:53

Pol Lluis · Answer 2 · 2018-06-01T08:22:24.110

-1

You can try setting your local driver to something like this:

'public' => [
    'driver' => 'local',
    'root' => storage_path('app/public'),
    'url' => env('APP_URL').'/storage',
    'visibility' => 'public',
],

edited Jun 01 '18 at 08:22

answered Jun 01 '18 at 08:15

Pol Lluis

1,152
7
17

Btw, maybe it's because you are using xampp to run laravel but haven't configured your application properly, '/cricket' shouldn't be entered, you can run your project doing: php artisan serve and then access it on 127.0.0.1:8080/storage/images/news/News_1.jpg – Pol Lluis Jun 01 '18 at 08:26
The configuration is show now. And I do not use laravel server, I use the xampp. – Abdul Raheem Ghani Jun 01 '18 at 08:28
the xampp has given me issues with this kind of things before thats why I recommened laravel server or PROPER CONFIGURATION on ur xampp – Pol Lluis Jun 01 '18 at 08:28

Cannot fetch image from storage directory in laravel

2 Answers2