laravel9, uploaded images are not displayed? - php

Question

/* i have one balde that i use for uploading the images "createEvent.blade.php" then i try to retrive it in 2 baldes "indexEvent.blade.php" and "events.blade.php" the images stored in "/storage/app/public/img" and i run "php artisan storage:link
" every thing is fine in my localhost the imges uploaded and displayed fine, but when i upload my website to the server it still uploade the imge but not displying it. i try to figur out that but nothing work. any one can help. */
the controller i use to store the imges and updated
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Carbon\Carbon;
use App\Models\Event;
use App\Models\EventAttendies;
use URL;
use Session;
use Redirect;
use Input;
use Maatwebsite\Excel\Facades\Excel;
use App\Exports\EventAttendiesExport;
class EventController extends Controller
{
//admin saide
public function index()
{
$data['events'] = Event::orderBy('id','desc')->paginate(20);
return view('dashboard.admin.indexEvent', $data);
}
public function create()
{
return view('dashboard.admin.createEvent');
}
public function store(Request $request)
{
$request->validate([
'title' => 'required',
'description' => 'required',
'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
'date' => 'required',
'place' => 'required',
'event_type' => 'required',
'status' => 'required',
]);
$path = $request->file('image')->store('public/img');
$event = new Event;
$event->title = $request->title;
$event->description = $request->description;
$event->date = $request->date;
$event->place = $request->place;
$event->event_type = $request->event_type;
$event->image = $path;
$event->status = $request->status;
$event->save();
return redirect()->route('events.index')
->with('success','Event has been created successfully.');
}
public function show(Event $event)
{
return view('dashboard.admin.indexEvent',compact('event'));
}
public function edit(Event $event)
{
return view('dashboard.admin.eventEdit',compact('event'));
}
public function update(Request $request, $id)
{
$request->validate([
'title' => 'required',
'description' => 'required',
'date' => 'required',
'place' => 'required',
'event_type' => 'required',
'status' => 'required',
]);
$event = Event::find($id);
if($request->hasFile('image')){
$request->validate([
'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
]);
$path = $request->file('image')->store('public/img');
$event->image = $path;
}
$event->title = $request->title;
$event->description = $request->description;
$event->date = $request->date;
$event->place = $request->place;
$event->event_type = $request->event_type;
$event->status = $request->status;
$event->save();
return redirect()->route('events.index')
->with('success','Event updated successfully');
}
// Event Show "events.blade.php" user side
public function event()
{
$data['events'] = Event::orderBy('id','desc')->where('status','1')->get();
return view('events', $data);
}
}
here my from from admin side to uploade the images
<form action="{{ route('events.store') }}" method="POST" enctype="multipart/form-data">
#csrf
<div class="overflow-hidden sm:rounded-md">
<div class="px-4 py-5 sm:p-2">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6 sm:col-span-6">
<label for="title" class="block text-sm font-medium text-gray-700">Event Title</label>
<input type="text" name="title" id="title" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm">
</div>
<div class="col-span-6 sm:col-span-6">
<label for="description" class="block text-sm font-medium text-gray-700">Event Description</label>
<input type="text" name="description" id="description" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm">
</div>
<div class="col-span-6">
<label for="place" class="block text-sm font-medium text-gray-700">Event Place</label>
<input type="text" name="place" id="place" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm">
</div>
<div class="col-span-6 sm:col-span-4">
<label for="date" class="block text-sm font-medium text-gray-700">Event Date</label>
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
</div>
<input datepicker="" datepicker-autohide="" name="date" id="date" type="text" class=" border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full pl-10 p-2.5 datepicker-input" placeholder="Select date">
</div>
<input class="hidden" name="event_type" value="Free" id="event_type">
<!--- <div class="col-span-6 sm:col-span-3">
<label for="event_type" class="block text-sm font-medium text-gray-700">Event Type</label>
<select id="event_type" name="event_type" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none sm:text-sm">
<option value="free">Free</option>
<option value="paid">Paid</option>
</select>
</div> -->
<div class="col-span-6 sm:col-span-3">
<label for="status" class="block text-sm font-medium text-gray-700">Event Status</label>
<select id="status" name="status" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none sm:text-sm">
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
</div>
<div class="col-span-6 sm:col-span-4">
<label for="date" class="block text-sm font-medium text-gray-700">Event Photo</label>
<input type="file" name="image" class="form-control" placeholder="Event Title">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="submit" class="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">Add</button>
<button type="button" class="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" id="close-Addmodal">Cancel</button>
</form>
here i retrive the image in admin side
#foreach ($events as $event)
<tr class="border-b border-gray-200 hover:bg-gray-100">
<td class="py-3 px-6 text-left whitespace-nowrap">
<div class="flex items-center">
<span class="font-medium">{{ $event->title }}</span>
</div>
</td>
<td class="py-3 px-6 text-left">
<div class="flex items-center">
<span>{{ $event->description }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<div class="flex items-center justify-center">
<span class="font-medium">{{ $event->date }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<div class="flex items-center justify-center">
<img class="w-6 h-6 rounded-full border-gray-200 border -m-1 transform hover:scale-125" src="{{ Storage::url($event->image) }}" alt="{{ $event->place }}"/>
</div>
</td>
<td class="py-3 px-6 text-center">
#if(($event->status)==1)
<span class="bg-purple-200 text-purple-600 py-1 px-3 rounded-full text-xs">Active</span>
#else
<span class="bg-red-200 text-red-600 py-1 px-3 rounded-full text-xs">Pending</span>
#endif
<!--<span class="bg-green-200 text-green-600 py-1 px-3 rounded-full text-xs">Completed</span>-->
here i retrive the imge in user side
#foreach ($events as $event)
<div class="w-full #if($events->count()>=2) md:w-1/2 #endif px-4">
<div class="bg-white shadow-lg rounded-lg overflow-hidden mb-10">
<img class="eventsPic w-full" style="background-image:url({{ Storage::url($event->image) }});"/>
<div class="p-8 sm:p-9 md:p-7 xl:p-9 text-center">
<h3>
<a href="javascript:void(0)"
class=" font-semibold text-dark text-xl sm:text-[22px] md:text-xl lg:text-[22px] xl:text-xl 2xl:text-[22px] mb-2 block hover:text-primary " >
{{ $event->title }}
</a>
</h3>
<p class="text-base text-body-color leading-relaxed">
{{ $event->description }}
</p>
<p>{{ ucfirst($event->event_type) }}</p>
<p>{{ $event->place }}</p>
<p>{{ $event->date }}</p>
<a id="Regis" data-event-id="{{$event->id}}" data-title="{{ $event->title }}" data-event-type="{{ $event->event_type }}"
href="javascript:void(0)"
class="register-btn inline-block py-2 px-12 border rounded-full text-base text-body-color font-medium hover:border-red-700 hover:bg-red-700 hover:text-white transition">
{{__('sniperTrans.Register')}}
</a>
</div>
</div>
</div>
#endforeach

Answer 1

the problem was I deployed it via GitHub and i do not give the permission to write.