Image

The Image Item allows for the inclusion of images in an Adaptive Card.

Property Type Required Description
altText string No Alternate text for the image for accessibility
horizontalAlignment string No Controls how Items are horizontally positioned within their container.
selectAction object No An Action that will be invoked when the Image is tapped or selected
size object No, default: auto Controls the approximate size of the image. The physical dimensions will vary per host. Specify “auto” for true image dimension or “stretch” to force it to fill the container
style string No Controls the way Images are displayed
type "Image" No Must be Image
url string Yes The URL to the image.
id string No A unique Id associated with the element
spacing string No Controls the amount of spacing between this element and the previous element.
separator boolean No, default: false The Separator object type describes the look and feel of a separation line between two elements.

Example

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "Image",
      "url":"http://adaptivecards.io/content/cats/1.png"
    }
  ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "Image", "url":"http://adaptivecards.io/content/cats/1.png" } ] }
Try it Yourself »

Properties

altText

Alternate text for the image for accessibility

  • Type: string
  • Required: No

horizontalAlignment

Controls how Items are horizontally positioned within their container.

  • Type: string
  • Required: No
  • Allowed values:
    • "left"
    • "center"
    • "right"

Example

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "horizontalAlignment:left",
      "weight": "bolder"
    },
    {
      "type": "Image",
      "url": "http://adaptivecards.io/content/cats/1.png",
      "size": "medium",
      "horizontalAlignment": "left"
    },
    {
      "type": "TextBlock",
      "text": "horizontalAlignment:center",
      "weight": "bolder",
      "horizontalAlignment": "center"
    },
    {
      "type": "Image",
      "url": "http://adaptivecards.io/content/cats/1.png",
      "size": "medium",
      "horizontalAlignment": "center"
    },
    {
      "type": "TextBlock",
      "text": "horizontalAlignment:right",
      "weight": "bolder",
      "horizontalAlignment": "right"
    },
    {
      "type": "Image",
      "url": "http://adaptivecards.io/content/cats/1.png",
      "size": "medium",
      "horizontalAlignment": "right"
    }
  ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "horizontalAlignment:left", "weight": "bolder" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "size": "medium", "horizontalAlignment": "left" }, { "type": "TextBlock", "text": "horizontalAlignment:center", "weight": "bolder", "horizontalAlignment": "center" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "size": "medium", "horizontalAlignment": "center" }, { "type": "TextBlock", "text": "horizontalAlignment:right", "weight": "bolder", "horizontalAlignment": "right" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "size": "medium", "horizontalAlignment": "right" } ] }
Try it Yourself »

selectAction

An Action that will be invoked when the Image is tapped or selected

  • Type: object
  • Required: No
  • Allowed values:

Example

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "selectAction on image",
      "weight": "bolder"
    },
    {
      "type": "Image",
      "url": "http://adaptivecards.io/content/cats/1.png",
      "selectAction": {
        "type": "Action.OpenUrl",
        "title": "cool link",
        "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
      }
    }
  ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "selectAction on image", "weight": "bolder" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "selectAction": { "type": "Action.OpenUrl", "title": "cool link", "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ" } } ] }
Try it Yourself »

size

Controls the approximate size of the image. The physical dimensions will vary per host. Specify "auto" for true image dimension or "stretch" to force it to fill the container

  • Type: object
  • Required: No, default: auto
  • Allowed values:
    • auto
    • stretch
    • small
    • medium
    • large

Example

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "size:small",
      "weight": "bolder",
      "size": "large"
    },
    {
      "type": "Image",
      "url": "http://adaptivecards.io/content/cats/1.png",
      "size": "small"
    },
    {
      "type": "TextBlock",
      "text": "size:medium",
      "weight": "bolder",
      "size": "large"
    },
    {
      "type": "Image",
      "url": "http://adaptivecards.io/content/cats/1.png",
      "size": "medium"
    },
    {
      "type": "TextBlock",
      "text": "size:large",
      "weight": "bolder",
      "size": "large"
    },
    {
      "type": "Image",
      "url": "http://adaptivecards.io/content/cats/1.png",
      "size": "large" 
    }
  ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "size:small", "weight": "bolder", "size": "large" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "size": "small" }, { "type": "TextBlock", "text": "size:medium", "weight": "bolder", "size": "large" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "size": "medium" }, { "type": "TextBlock", "text": "size:large", "weight": "bolder", "size": "large" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "size": "large" } ] }
Try it Yourself »

style

Controls the way Images are displayed

  • Type: string
  • Required: No
  • Allowed values:
    • "default"
    • "person"

Example

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "text": "style: default",
              "weight": "bolder"
            },
            {
              "type": "Image",
              "url": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg",
              "style": "default"
            }
          ]
        },
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "text": "style: person",
              "weight": "bolder"
            },
            {
              "type": "Image",
              "url": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg",
              "style": "person"
            }
          ]
        }
      ]
    }
  ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "text": "style: default", "weight": "bolder" }, { "type": "Image", "url": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg", "style": "default" } ] }, { "type": "Column", "items": [ { "type": "TextBlock", "text": "style: person", "weight": "bolder" }, { "type": "Image", "url": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg", "style": "person" } ] } ] } ] }
Try it Yourself »

type

Must be Image

  • Type: "Image"
  • Required: No
  • Allowed values:
    • Image

url

The URL to the image.

  • Type: string
  • Required: Yes

id

A unique Id associated with the element

  • Type: string
  • Required: No

spacing

Controls the amount of spacing between this element and the previous element.

  • Type: string
  • Required: No
  • Allowed values:
    • "none"
    • "small"
    • "default"
    • "medium"
    • "large"
    • "extraLarge"
    • "padding"

Example

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "spacing: none",
      "weight": "bolder",
      "size": "medium"
    },
    {
      "type": "Image",
      "url": "http://adaptivecards.io/content/cats/1.png",
      "size": "medium",
      "spacing": "none"
    },
    {
      "type": "TextBlock",
      "text": "spacing: large, separator: true",
      "weight": "bolder",
      "size": "medium"
    },
    {
      "type": "Image",
      "url": "http://adaptivecards.io/content/cats/1.png",
      "size": "medium",
      "spacing": "large",
      "separator": true
    }
  ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "spacing: none", "weight": "bolder", "size": "medium" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "size": "medium", "spacing": "none" }, { "type": "TextBlock", "text": "spacing: large, separator: true", "weight": "bolder", "size": "medium" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "size": "medium", "spacing": "large", "separator": true } ] }
Try it Yourself »

separator

The Separator object type describes the look and feel of a separation line between two elements.

  • Type: boolean
  • Required: No, default: false