How to show image using storage folder for looping data - php

Question

My image is not displaying. I'm using Storage:: to save my image. Here how my folder looks like and php artisan storage:link has been created. I already try this code {{ asset('storage/complaint' . $c->image)}},{{ storage_path() . '/complaint' .$c->image}}and {{ url('/public/complaint' . $c->image) }} but it seems to be not working at all.
web.php
Route::get('/report-form','ComplaintController#create');
Route::post('/report-create','ComplaintController#store');
Route::get('/report-view','ComplaintController#index');
ComplaintController.php
<?php
namespace App\Http\Controllers;
use Auth;
use Validator;
use Response;
use Carbon\Carbon;
use App\Complaint;
use Illuminate\Support\Facades\Storage;
use Illuminate\Http\Request;
use Intervention\Image\ImageManagerStatic as Image;
class ComplaintController extends Controller
{
public function index(Request $request)
{
if (Auth::user()->role == 'buyer')
{
$complaint = Complaint::where('report_by',Auth::user()->id)->get();
return view('buyers.complaints.index',compact('complaint'));
}
}
public function create(Request $request)
{
return view('buyers.complaints.create');
}
public function store(Request $request)
{
if (count($request->defect_id) > 0) {
foreach($request->defect_id as $item=>$v) {
if (isset($request->image[$item])) {
$images = $request->file('image');
$image_resize = Image::make($images[$item]->getRealPath());
$image_resize->resize(900, 630);
$filename = $images[$item]->getClientOriginalName();
Storage::put($filename, $image_resize);
Storage::move($filename, 'public/complaint/' . $filename);
}
$data = array(
'defect_id' => $request->defect_id[$item],
'image' => $filename,
'description' => $request->description[$item],
'report_by' => Auth::user()->id,
'created_at' => Carbon::now()->toDateTimeString(),
'updated_at' => Carbon::now()->toDateTimeString()
);
Complaint::insert($data);
}
}
return redirect('/report-form')->with('success','Your report is submitted!');
}
create.blade.php
<div class="panel">
<form action="/report-create" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<table class="table table-bordered">
<thead>
<tr>
<th><center>Type of Defect</center></th>
<th><center>Image</center></th>
<th><center>Description</center></th>
<th><center>Action</center></th>
</tr>
</thead>
<tbody>
<tr>
<td width="20%">
<select class="form-control" name="defect_id[]">
<option value="" selected>Choose Defect</option>
#foreach(App\Defect::all() as $defect)
<option value="{{$defect->id}}">{{$defect->name}}</option>
#endforeach
</td>
<td width="15%">
<input type="file" class="form-control-file" name="image[]">
</td>
<td width="45%">
<input type="text" class="form-control" name="description[]">
</td>
<td width="10%">
<button type="button" class="btn btn-info btn-sm" id="add-btn"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
</tbody>
</table>
<center><button type="submit" class="btn btn-primary">Submit</button></center>
<br>
</form>
</div>
#section('footer')
<script>
$(document).ready(function () {
$('#add-btn').on('click',function () {
var html = '';
html += '<tr>';
html += '<td><select class="form-control" name="defect_id[]"><option value="" selected>Choose Defect</option>#foreach(App\Defect::all() as $defect)<option value="{{$defect->id}}">{{$defect->name}}</option>#endforeach</td>';
html += '<td><input type="file" class="form-control-file" name="image[]"></td>';
html += '<td><input type="text" class="form-control" name="description[]"></td>';
html += '<td><button type="button" class="btn btn-danger btn-sm" id="remove-btn"><i class="glyphicon glyphicon-minus"></i></button></td>';
html += '</tr>';
$('tbody').append(html);
})
});
$(document).on('click','#remove-btn',function () {
$(this).closest('tr').remove();
});
</script>
#stop
index.blade.php
<div class="panel-heading">
<h3 class="panel-title"><strong>List of Report</strong></h3>
</div>
<div class="panel-body">
<table class="table table-hover">
<thead>
<tr>
<th>Defect Name</th>
<th>Description</th>
<th>Image</th>
</tr>
</thead>
#foreach($complaint as $c)
<tr class="">
<td>{{$c->defect->name}}</td>
<td>{{$c->description}}</td>
<td><img src="{{ asset('storage/complaint' . $c->image)}}" class="" alt="{{$c->image}}"></td>
</tr>
#endforeach
</table>
</div>
What is my mistakes?

Answer 1

use Storage::url() ref link https://laravel.com/docs/8.x/filesystem#file-urls
<td><img src="{{ Storage::url('complaint/' . $c->image)}}" class="" alt="{{$c->image}}"></td>
NOTE: make sure APP_URL=http://exmaplet.test this is set