I have a laravel project serving domain.com and there is a subdomain for user profile as profile.domain.com,
Now on edit profile blade, I need to show the uploaded avatar image of user which is uploaded and stored at root project storage directory:
/home/myuser/domain.com/storage/app/private/public/users/{userId}/{filename}
I made a route like this:
Route::get('/private-file/{type}/{userId}/{filename}', function ($type, $userId, $filename) {
$allowedTypes = ['users', 'members'];
if (!in_array($type, $allowedTypes)) {
abort(404);
}
$mainStoragePath = '/home/pachim/ino-official.org/storage/app/private/public';
$path = $mainStoragePath . "/{$type}/{$userId}/{$filename}";
if (!file_exists($path)) {
abort(404);
}
$mimeType = mime_content_type($path);
return response()->file($path, ['Content-Type' => $mimeType]);
})->name('private.file');
And it is working and show the user avatar image like this:
https://profile.domain.com/private-file/users/115/Hq6VhEg1YSJQG82ALfabShAQPWTSPWUCf58vtLYu.png
But in the blade, the image not showing up, despite the correct source which is accessible by now:
<div class="col-md-6 mb-4">
<label for="avatar" class="form-label fw-bold">Profile Picture</label>
<div class="d-flex align-items-center">
<div class="me-3">
@php
// Default placeholders if no images
$defaultAvatar = asset('/assets/img/profile.png');
$defaultPassport = asset('assets/img/passport-placeholder.jpg');
// Build URLs using your new route if avatar/passport_photo exist
$avatarUrl = $user->avatar
? url('user-image/' . $user->avatar)
: $defaultAvatar;
$photoUrl = $detail?->passport_photo
? url('user-image/' . $detail->passport_photo)
: $defaultPassport;
@endphp
<img id="avatarPreview" src="{{ $avatarUrl }}" alt="User Avatar" class="rounded-circle border" style="width: 100px; height: 100px; object-fit: cover;">
</div>
<div class="flex-grow-1">
<input type="file" name="avatar" class="form-control @error('avatar') is-invalid @enderror" id="avatar" accept="image/*" onchange="previewAvatar(this)">
@error('avatar')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
<small class="text-muted">Accepted: JPG, PNG. Max size: 2MB</small>
</div>
</div>