Overview
Image is a container designed to hold a single StaticResource. Upload your images to Salesforce by creating StaticResources.This component supports Lightning Navigation, allowing a click to the image to result in either the loading of a separate web page or the replacement of the flow with another page (flow finishing behavior). The navigation attributes are described here.
Watch the video.
NEW 11/29/18
Think 3D buttons.
Use this component to create an interactive image. Three phases are now supported. The standard image to be displayed, an image to be displayed while the mouse is hovering over the element and an image to be displayed while the mouse button is pressed on the element.
| Attribute | Description |
| Image(Display) Name | The required name of a StaticResource. Should be an image format |
| Image(Hover) Name | The optional name of a StaticResource. Should be an image format |
| Image(Press) Name | The optional name of a StaticResource. Should be an image format |
| image Alt Text | Used in the “alt” attribute of the resulting img tag |
| image Width | Used in the “width” css style attribute |
| image Height | Used in the “height” css style attribute |
| composite Style String | This string is used in the style tag of the span element containing the image. Normally, you specify individual elements, and the image component will assemble them into one, big style tag. If you have your own style information and can form it into a single string, you can pass it in through this attribute. This is an advanced feature and is not well tested. |
| styleBorderRadius | will be added to the style string. Allowable Values |
| styleBorderStyle | will be added to the style string. Allowable Values |
| styleBorderWidth | will be added to the style string. Allowable Values |
| styleBorderColor | will be added to the style string. Allowable Values |
| styleMarginTop | Add spacing between this image and other elements. Allowable Values |
| styleMarginRight | Add spacing between this image and other elements. Allowable Values |
| styleMarginBottom | Add spacing between this image and other elements. Allowable Values |
| styleMarginLeft | Add spacing between this image and other elements. Allowable Values |
| styleMargin | While you can pass in a fully structure four-part value string, as discussed here, the primary use of this tag in flow images is centering, which is accomplished by setting this to “auto” in conjunction with two other attributes (see “Centering”) |
| stylePaddingTop | Padding creates space between the border of an element and the image. Discussed here. |
| stylePaddingRight | Padding creates space between the border of an element and the image. Discussed here. |
| stylePaddingBottom | Padding creates space between the border of an element and the image. Discussed here. |
| stylePaddingLeft | Padding creates space between the border of an element and the image. Discussed here. |
| styleDisplayAsBlock | this defaults to false, but can be set to true. When set, it adds “display:block” to the styling. By default, images are in span tags. they will align next to each other horizontally. If this is set to true, each image will take up the full width of the screen. Discussed here. |