Avatars
Conveniently show an avatar.
<x-ui::avatar image="https://e-cdn-images.dzcdn.net/images/cover/90929726d413c3f9325138a89b5176db/500x500-000000-80-0-0.jpg" />
Copied!
Invalid Image
The image is fail-proof and will show a default avatar when the image can't be downloaded.
You can provide your own default image in case you want to customize the component even further.
<x-ui::avatar image="http://invalid-image.com/image.png" />
<x-ui::avatar image="http://invalid-image.com/image.png" default="https://e-cdn-images.dzcdn.net/images/cover/90929726d413c3f9325138a89b5176db/500x500-000000-80-0-0.jpg"/>
Copied!
Gravatar
Show the gravatar based on an email.
<x-ui::gravatar email="jordi@gloobus.net" />
Copied!
Not found gravatar
Just like the avatar component, the gravatar component is fail-proof and will show a default avatar when the image can't be downloaded.
You can provide your own default image in case you want to customize the component even further.
<x-ui::gravatar email="invalid@gloobus.net" />
<x-ui::gravatar email="invalid@gloobus.net" default="https://e-cdn-images.dzcdn.net/images/cover/90929726d413c3f9325138a89b5176db/500x500-000000-80-0-0.jpg"/>
Copied!
Size
You can change the size of the avatar based on your needs.
It uses tailwindcss width and height classed under the hood, therefore you must use a valid number and also have the class compiled in your project.
<x-ui::avatar size="20" image="https://e-cdn-images.dzcdn.net/images/cover/90929726d413c3f9325138a89b5176db/500x500-000000-80-0-0.jpg" />
<x-ui::gravatar size="20" email="jordi@gloobus.net"/>
Copied!