Profile Image not displaying - php

Question

I am currently doing an instagram clone project, and I have encountered a problem where the profile image is appearing broken. I have tried to echo out the path, and the problem is, despite this being the path specified:
/storage/app/public/profile/9UHe7CSRK4V9SNESMz0BAYggmQOp2G04J3Ygcgtl.png
The browser is returning this path
/storage/app/public/profile//9UHe7CSRK4V9SNESMz0BAYggmQOp2G04J3Ygcgtl.png
So you can see that the browser is adding a second '/' after profile, I don't know why.
Here is my index.blade
<div class="col-3 p-5">
<img src="{{ dd($user->profile->profileImage()) }}" class="rounded-circle w-100">
</div>
My Profile model
class Profile extends Model
{
protected $guarded = [];
public function profileImage()
{
$imagePath = ($this->image) ? $this->image : 'profile/9UHe7CSRK4V9SNESMz0BAYggmQOp2G04J3Ygcgtl.png';
return '/storage/app/' . $imagePath;
}
Profiles controller
class ProfilesController extends Controller
{
public function index(User $user)
{
return view('profiles.index', compact('user'));
}
public function edit(User $user)
{
$this->authorize('update', $user->profile);
return view('profiles.edit', compact('user'));
}
public function update(User $user)
{
$this->authorize('update', $user->profile);
$data = request()->validate([
'title' =>'required',
'description' =>'required',
'url' =>'url',
'image' =>'',
]);
if(request()->hasfile('image')){
$imagePath = request()->file('image')->store('profile', 'public');
$image = Image::make(public_path("storage/{$imagePath}"))->fit(1200, 1200);
$image->save();
}
auth()->user()->profile->update(array_merge(
$data,
['image' => $imagePath]
));
return redirect("/Profile/{$user->id}");
}
}
Routes
Route::get('/p/create', [App\Http\Controllers\PostsController::class, 'create'])->name('posts.create');
Route::get('/p/{post}', [App\Http\Controllers\PostsController::class, 'show']);
Route::post('/p', [App\Http\Controllers\PostsController::class, 'store']);
Route::get('/Profile/{user}', [App\Http\Controllers\ProfilesController::class, 'index'])->name('Profile.show');
Route::get('/Profile/{user}/edit', [App\Http\Controllers\ProfilesController::class, 'edit'])->name('profiles.edit');
Route::patch('/Profile/{user}', [App\Http\Controllers\ProfilesController::class, 'update'])->name('profiles.update');
Thanks in advance

Answer 1

You could load it into base64 with this PHP code:
$type = pathinfo(dd($user->profile->profileImage()), PATHINFO_EXTENSION);
$data = file_get_contents(dd($user->profile->profileImage()));
$imgbase64 = "data:image/" . $type . ";base64," . base64_encode($data);
then use
<img src="<?php echo $imgbase64; ?>" class="rounded-circle w-100">
This will then display the base64 image, which doesn't store the URL in plain text.