Purpose
If an image fails to load from the source, provide a fallback image, or hide it from the DOM altogether to prevent the unsightly little broken-image icon.
| Class | Purpose | Default |
|---|
success (Optional) | The class that will be applied to the image if the image loads successfully | - |
fail (Optional) | The class that will be applied to the image if the fallback is triggered | - |
| Value | Type | Description | Default |
|---|
placeholder (Optional) | String | The URL of a fallback image to be displayed if the <img>'s src cannot be loaded. | The <img>'s src |
Events
| Event | When | Dispatched on | event.detail |
|---|
fallback-image:placeholder | When the image fails to load and falls back to the placeholder | The controller root element | - |
fallback-image:fail | When the image and the placeholder (if any) fails to load | The controller root element | - |
Side Effects
- Sets an
onError handler for the mounted <img> tag.
- Sets the style of the image to be
display: none if the image fails to load.
How to Use
If an image fails to load, the controller will either try to set the src to a placeholder image you provide, or hide the image using display: none.
If the placeholder URL you provide also fails to load, the controller will fall back to the default behaviour of hiding the element.