Image

The Image (banner) component can present an image (animated or static) from a specific URL as a tappable banner with a link.

Dynamic Content

The Image component wraps an ImageView and can be presented by the backend as part of a feature's slotContent.

Contract

Present an image component using a URL with the following json:

{
    "type": "image",
    "content": {
        "id": "{id}", // Optional id for tracking.
        "url": "{image-url}",
        "size": { "width": 400, "height": 300 }, // Optional but situationally required to size the component (aspect ratio).
        "link": "{link}", // Optional.
        "customData": { ... }
    },
    "modifiers": {
        "accessibility": "{alt-text}", // Optional accessibility text (useful for images).
        "padding": { ... },
        ...
    }
}

Source

Sources can be used to present components directly within a SlotView. The Image component supports any source available to set up the ImageView view.

ViewSource(path: "image", content: ImageComponentContent(
    id: "{id}",
    source: ...,
    size: .init(width: 400, height: 300),
    link: "{link}",
    customData: ...
))

Analytics

When the image has a link and is tapped the following event is triggered:

slotComponentTap:
  type: image
  id: {id}