Laravel display default avatar if user has none

Question

I am allowing user to upload an avatar (profile image) in their profile. While uploading avatar is entirely optional, if user does not have avatar, a default image will be used. However, checking whether a user has an avatar uploaded or not is my problem. It only display an avatar only if user has one.

Below is the code in my view file

 @foreach($users as $user) 
 <div class="d-inline p-2">
 <div class="col"> 
 <div class="card" style="width: 18rem; background-color: #162238; color:white;">
 <br/>
 <img id="nature" src="{{asset('avatars/' . ($user->avatar ?? 'default1.jpg'))}}" class="imogi" style="width: 80px; border-radius: 20%" alt=""/>
 <div class="card-body" style="background-color: #162238; color:white;">
 <h5 class="card-title" style="background-color: #162238; color:white; text-align:center;">{{$user->name}}</h5>
 </div>
 <ul class="list-group list-group-light list-group-small" style="background-color: #162238; color:white;">
 <li class="list-group-item px-4" style="background-color: #162238; color:white; text-align:center;"><i class="fa fa-building-o" style="color:#3490dc;"></i> {{$user->organization}}</li>
 <li class="list-group-item px-4" style="background-color: #162238; color:white; text-align:center;"><i class="fa fa-map-marker" style="color:#3490dc;"></i> {{$user->location}}</li>
 <li class="list-group-item px-4" style="background-color: #162238; color:white; text-align:center; color:#3490dc;"><small><i class="fa fa-clock-o" style="color:#3490dc;"></i> joined {{ \Carbon\Carbon::parse($user->created_at)->diffForHumans() }}</li></small>
 </ul>
</div>
 </div>
</div>
<br/>
@endforeach

• TUPKAP: If you need @if($user->avatar != null) then $user->avatar sometimes is NULL or perhaps does'nt exists at all. Blade has also the @empty directive. Anyway I think that using blade directives in this way is not a good 'pattern' because you must repeat the <img> tag entirely
• Mohaila Tlaba: @Pippo thanks, I agree coalescing operator is the good choice

Answer 1

You can create a method in your model to check if the attribute has value. If not then assign an default value. This way you don't have to write an statement to check if the user has an avatar. For example if the column name is avatar in your table.

public function getAvatarAttribute($value)
{
 if (!$value) {
 // If 'avatar' is null, return the path to the default image
 return asset('/public/images/profile-image.webp');
 }
 // Otherwise, return the actual image path
 return $value;
}

• Mohaila Tlaba: Thanks @Edmon Belchev i tried adding the above function in my User Model and in my view <img id="nature" src="{{asset('avatars/' . $user->avatar)}}" class="imogi" style="width: 80px; border-radius: 20%" alt=""/> but still same results...unless if i did not get you well
• Tim Lewis: The get{Whatever}Attribute() syntax is for older versions (8.x and below) of Laravel. If you're using 9.x or above, then use this syntax instead: laravel.com/docs/10.x/eloquent-mutators#defining-an-accessor. public function avatar(): Attribute { // ... }. Also, if your property is called avatar, Laravel sometimes has issues when you define an avatar Accessor, since the name isn't unique. I typically use something like displayAvatar, or avatarFallback, etc.
• Mohaila Tlaba: Thank you for your suggestion @Tim Lewis, i am using laravel 8
• Tim Lewis: Ok cool, so this answer has the right idea then; if you define something like getDisplayAvatarAttribute(), then you'd call <img src="{{ $user->display_avatar }}"/>. You'll probably need to tweak the code a bit depending on what $user->avatar contains, but this is simply a "cleaner" solution than $user->avatar ?? 'defaults.jpg' as suggested below, as $user->display_avatar would contain all the logic.

Answer 2

If default1.jpg is in avatars folder, add brackets like so:

<img id="nature" src="{{asset('avatars/' . ($user->avatar ?? 'default1.jpg'))}}" class="imogi" style="width: 80px; border-radius: 20%" alt=""/>

That is because dot string concatenation operator has precedence over the null coalescing operator and the result in your way is:

asset(('avatars/' . $user->avatar) ?? 'default1.jpg')

and so default1.jpg is referenced from a wrong location

EDIT

If that is not enough:

• First make sure that default1.jpg is located in avatars folder
• Then you can test if $user->avatar is NULL or other nullish value, you can use Elvis operator ?: insetad of ?? for this case, or more safely:

asset('avatars/' . (($user->avatar ?? NULL) ?: 'default1.jpg'))

• If all of this still doesn't fix, you need to check the page source in the browser to see what is set in the image when the avatar for the user is missing. Once you have checked this, if the users with no avatar have a wrong image name and it's always the same, you can rename your default1.jpg like the one listed in the users record.

• An other option, if certain users have a missing avatar file, can be something like:

@php
$avatarPath = 'avatars/';
$avatar = $avatarPath . ($user->avatar ?? '');
$img = file_exists(public_path($avatar)) ? asset($avatar) ? asset($avatarPath . 'default1.jpg');
@endphp
<img id="nature" src="{{ $img }}" class="imogi" style="width: 80px; border-radius: 20%" alt=""/>

(I can't test it now)

A better solution would be to run a batch that updates records that have a non-existent image

• Mohaila Tlaba: Thank you very much @Pippo for the perfect reply. I am still getting the same results adding brackets like this src="{{asset('avatars/' . ($user->avatar ?? 'default1.jpg'))}}" still display only avatars uploaded by user
• Mohaila Tlaba: I will appreciate any further suggestion, thanks once again.
• TUPKAP: I've edited my answer with more advice
• Mohaila Tlaba: Thanks @Pippo I tried editing my code above, still giving me same results of not displaying default if user has none
• TUPKAP: I've added a modification to the second option. Please verify the content of $user->avatar with dd() to see how is filled and if it exists when the user hasn't an avatar and check the page source in the browser and report here to see what is set when the image is no not shown