Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Using Images

To display images, use the ui:image component. ui:image automates common usages of the HTML <img> tag, such as href linking and other attributes. For an example on how you can use component attributes in images to switch between CSS classes, take a look at the ui:outputCheckbox component.

Additionally, include the imageType attribute to denote 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 an alternate text for the image, which is helpful if the user has no access to the image.

1swfobject.registerObject("clippy.codeblock-0", "9");<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.

1swfobject.registerObject("clippy.codeblock-1", "9");<div class="Following">
2    <span class="assistiveText">Following</span>
3</div>

If you use an icon font to display an informational image, provide assistive text that will be put into the DOM.

1swfobject.registerObject("clippy.codeblock-2", "9");<a class="icon-like">
2    <span class="assistiveText">Like<span>
3</a>

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.
1swfobject.registerObject("clippy.codeblock-3", "9");<ui:image src="decoration.png" imageType="decorative" />