CODEWITHSUNDEEP
laravellaravel-8laravel-livewire
The Only Smart Boy
The Only Smart Boy

Reputation: 574

showing images in Laravel 8 live wire

I have installed laravel 8 and a fresh install of LiveWire authentication scaffolding but when I add an image it does not show and if I try to load the image in aq new tab it redirects to index page

I have added the image as follows

<img src="{{asset( Auth::user()->profile_photo_url) }}" />

What could I be doing wrong or what could I be missing?

Upvotes: 1

Views: 4114

Answers (1)

Qirel
Qirel

Reputation: 26460

The quick answer

You don't have to use asset() to display the image, you have the full image URL readily available in that property. It should therefor simply be

<img src="{{ auth()->user()->profile_photo_url }}" />

The long answer

If you'll find the source for that profile_photo_url attribute, which can be found in the Laravel\Jetstream\HasProfilePhoto trait, you'll see that its defined as

/**
 * Get the URL to the user's profile photo.
 *
 * @return string
 */
public function getProfilePhotoUrlAttribute()
{
    return $this->profile_photo_path
                ? Storage::disk($this->profilePhotoDisk())->url($this->profile_photo_path)
                : $this->defaultProfilePhotoUrl();
}

This means that if there is a profile photo, fetch the URL of the disk where profile photos are defined - otherwise, get the default one (which is using ui-avatars.com).

So this means we'll have to learn about the Storage::disk(..)->url(..) methods, and figure out what disk we're using. The default disk is the public one (you can take my word for it, or check the profilePhotoDisk() method in the same trait).

So we now know that the photo will be stored in the storage, under the public disk. Next, we need to figure out what the url() method does. It essentially generates the path to the actual image, all ready to use in an image-soruce tag. Which in turn means that you don't need to run the profile_photo_url property through the asset() method! Another reason for this is that you won't get the actual image if the source is external, i.e. the default image from ui-avatars.com.

Upvotes: 2

Related Questions