avatar is a content area that displays an image, typically a photo of a person or a company logo.
The following example demonstrates four possible content options for
<avatar image="/icons/mary.png" abbreviation="MJ" name="Mary Elizabeth Jones"/> <avatar abbreviation="MJ" name="Mary Elizabeth Jones"/> <avatar name="Mary Elizabeth Jones"/> <avatar/>
Note the priority of the attributes. The image is displayed first. If no image is set or cannot render, it will be substituted with the abbreviation value. The first letters in the name are displayed if neither image nor abbreviation is set. There is also a fallback image that is displayed in case there is no content at all.
avatar component can display an image from different resources. You can set a path to the resource declaratively with the image attribute, or set it programmatically.
An image can be served statically by the application.
By default, static content is served from
/META-INF/resources directories of the classpath (see details in the Spring Boot documentation).
For example, if your image is located under
/src/main/resources/META-INF/resources, such as
/src/main/resources/META-INF/resources/icons/mary.png, you can specify the image as follows:
Similarly, an image can be loaded from an arbitrary URL.
Sets an abbreviation to display in the component. This can be initials, or other short form to identify the avatar owner. It’s better to keep it to 2-3 characters.
Specifies the background color for the avatar component. There are seven different colors that correspond to index values from 0 to 6.
See the Vaadin Docs for more information.