The avatar component provides an easy way to show an avatar of a user. It makes use of unavatar behind the scenes to retrieve an image from different social providers.
The avatar component comes ready out-of-the-box with Blade UI Kit. Simply install the package and you're good to go.
The most basic usage of the avatar component is as a self-closing component. Search for an identifier like a username, email or domain:
<x-avatar search="johndoe" />This will output the following HTML:
<img src="https://unavatar.now.sh/johndoe" />This will trigger unavatar to search an image across different providers for the given search request. It will always render an image.
You can choose a specific provider by using the provider attribute:
<x-avatar search="[email protected]" provider="gravatar" />This will output the following HTML:
<img src="https://unavatar.now.sh/gravatar/[email protected]" />And this will force unavatar to search only Gravatar images.
If you'd like to provide a fallback image when no match is found for a given search result, you can use the fallback attribute:
<x-avatar search="johndoe" fallback="https://example.com/image.png" />This will output the following HTML:
<img src="https://unavatar.now.sh/johndoe?fallback=https%3A%2F%2Fexample.com%2Fimage.png" />The avatar component also allows you to pass a user-uploaded image through the src attribute that will take precedence over the search query:
<x-avatar search="johndoe" src="https://example.com/image.png" />This will output the following HTML:
<img src="https://example.com/image.png" />If no user uploaded image is passed, the search query is executed:
<x-avatar search="johndoe" :src="$image = ''" />This will output the following HTML:
<img src="https://unavatar.now.sh/johndoe" />