Using Images

To display images, use the ui:image component. The ui:image component automates common usages of the HTML <img> tag, such as href linking and other attributes. Additionally, include the imageType attribute to show if the image is informational or decorative. Use the title attribute for tooltips, especially for icons.

Informational Images

Informational images can provide information that may not be available in the text, such as a Like or Follow image. They are actionable and can stand alone in a button or hyperlink. Include the alt tag to specify alternate text for the image, which is helpful if the user has no access to the image.

1<ui:image src="follow.png" imageType="informational" alt="follow" />

If you use CSS to display an informational image, you must provide assistive text that will be put into the DOM, by using the assistiveText class.

1<div class="Following">
2    <span class="assistiveText">Following</span>
3</div>

Decorative Images

Decorative images are images that can be removed without affecting the logic or content of the page. You don't need to specify assistive text for decorative images.

1<ui:image src="decoration.png" imageType="decorative" />

Code Samples

If your code failed, check to make sure you used the alt tag and the assistiveText class correctly.

Informational image code example:

1alt tag:
2<ui:image src="follow.png" imageType="informational" alt="follow" />
3assistiveText class:
4<div class="Following">
5    <span class="assistiveText">Following</span>
6</div>

Decorative image code example:

1<ui:image src="decoration.png" imageType="decorative" />

Lightning Aura Components Developer Guide

Using Images

Informational Images

Decorative Images

Code Samples