Cannot fetch image from storage directory in laravel - 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.

Answer 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 }}"

Answer 2

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',
],