To display images, use the HTML <img> element. Include an image in your component by uploading it as a static resource or content asset.To display an icon, use the lightning:icon component, which gives you access to Salesforce Lightning Design System icons or your own custom icon. To display an avatar, use lightning:avatar.Consider lightning:buttonIcon or lightning:buttonIconStateful to display an actionable image such as a Like or Follow image.
Follow these accessibility guidelines when using images and icons in your component.
Informational images and icons can provide information that’s not available in the text, such as an image that represents an approved step. Include alternative text for images and icons to help users without access to the images and icons. Use the alt attribute with the <img> element and alternativeText attribute with the base components.
Image with Alternative Text:
1<img src="{!$Resource.profile_pic}" alt="User avatar"/>Icon with Alternative Text:
1<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>Avatar with Alternative Text:
1<lightning:avatar src="{!$Resource.profile_pic}" alternativeText="John Smith"/>Stateful Button Icon with Alternative Text:
An informational image or icon, such as a Like icon, is actionable and can stand alone in a button or hyperlink.
1<lightning:buttonIconStateful
2 iconName="utility:like"
3 selected="{! v.liked }"
4 onclick="{! c.handleLikeButtonClick }"
5 alternativeText="Like" />CSS with Alternative Text:
If you use CSS to display an informational image, you must provide assistive text.
1<div class="Following">
2 <span class="slds-assistive-text">Following</span>
3</div>Decorative images are images that can be removed without affecting the logic or content of the page. Assistive text is optional for decorative images.
For example, placing an add icon or checkmark icon next to a text label reinforces the text’s meaning but adds no new information. Consider this Follow button with an add icon next to it. When clicked, the button label changes to “Following” and its icon updates to a checkmark. The icons don’t require assistive text.
1<lightning:buttonStateful
2 labelWhenOff="Follow"
3 labelWhenOn="Following"
4 iconNameWhenOff="utility:add"
5 iconNameWhenOn="utility:check"
6 state="{! v.buttonstate }"
7 onclick="{! c.handleClick }"
8 />The base components discussed in this topic implement the iconography design and accessibility guidelines in the Salesforce Lightning Design System.
See Also
j