Schema Explorer

Image

Displays an image.

Property Type Required Description Version
type "Image" Yes Must be "Image". 1.0
url uri Yes The URL to the image. Supports data URI in version 1.2+ 1.0
altText string No Alternate text describing the image. 1.0
backgroundColor string No Applies a background to a transparent image. This property will respect the image style. 1.1
height string, BlockElementHeight No, default: "auto" The desired height of the image. If specified as a pixel value, ending in ‘px’, E.g., 50px, the image will distort to fit that exact height. This overrides the size property. 1.1
horizontalAlignment HorizontalAlignment No Controls how this element is horizontally positioned within its parent. 1.0
selectAction ISelectAction No An Action that will be invoked when the Image is tapped or selected. Action.ShowCard is not supported. 1.1
size ImageSize No Controls the approximate size of the image. The physical dimensions will vary per host. 1.0
style ImageStyle No Controls how this Image is displayed. 1.0
width string No The desired on-screen width of the image, ending in ‘px’. E.g., 50px. This overrides the size property. 1.1

Inherited properties

Property Type Required Description Version
fallback Element, FallbackOption No Describes what to do when an unknown element is encountered or the requires of this or any children can’t be met. 1.2
separator boolean No When true, draw a separating line at the top of the element. 1.0
spacing Spacing No Controls the amount of spacing between this element and the preceding element. 1.0
id string No A unique identifier associated with the item. 1.0
isVisible boolean No, default: true If false, this item will be removed from the visual tree. 1.2
requires Dictionary<string> No A series of key/value pairs indicating features that the item requires with corresponding minimum version. When a feature is missing or of insufficient version, fallback is triggered. 1.2

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

url

The URL to the image. Supports data URI in version 1.2+

  • Type: uri
  • Required: Yes

altText

Alternate text describing the image.

  • Type: string
  • Required: No

backgroundColor

Applies a background to a transparent image. This property will respect the image style.

  • Type: string
  • Version : 1.1
  • Required: No

Example

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [{
		"type": "ColumnSet",
		"columns": [{
				"type": "Column",
				"width": "stretch",
				"items": [{
					"type": "Image",
					"backgroundColor": "#982374",
					"url": "http://adaptivecards.io/content/cats/1.png"
				}]
			},
			{
				"type": "Column",
				"width": "stretch",
				"items": [{
					"type": "Image",
					"backgroundColor": "#128192",
					"url": "http://adaptivecards.io/content/cats/1.png"
				}]
			},
			{
				"type": "Column",
				"width": "stretch",
				"items": [{
					"type": "Image",
					"backgroundColor": "#183774",
					"url": "http://adaptivecards.io/content/cats/1.png"
				}]
			}
		]
	}]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [{ "type": "ColumnSet", "columns": [{ "type": "Column", "width": "stretch", "items": [{ "type": "Image", "backgroundColor": "#982374", "url": "http://adaptivecards.io/content/cats/1.png" }] }, { "type": "Column", "width": "stretch", "items": [{ "type": "Image", "backgroundColor": "#128192", "url": "http://adaptivecards.io/content/cats/1.png" }] }, { "type": "Column", "width": "stretch", "items": [{ "type": "Image", "backgroundColor": "#183774", "url": "http://adaptivecards.io/content/cats/1.png" }] } ] }] }
Try it Yourself »
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "Image",
			"url": "http://adaptivecards.io/content/cats/2.png",
			"size": "small",
			"backgroundColor": "#FF0000FF"
		},
		{
			"type": "Image",
			"url": "http://adaptivecards.io/content/cats/1.png",
			"style": "person",
			"backgroundColor": "#FFFF0000"
		}
	]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "Image", "url": "http://adaptivecards.io/content/cats/2.png", "size": "small", "backgroundColor": "#FF0000FF" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "style": "person", "backgroundColor": "#FFFF0000" } ] }
Try it Yourself »

height

The desired height of the image. If specified as a pixel value, ending in 'px', E.g., 50px, the image will distort to fit that exact height. This overrides the size property.

  • Type: string, BlockElementHeight
  • Version : 1.1
  • Required: No, default: "auto"
  • Allowed values:
    • string
    • "auto": The height of the container will be determined by the height of its contents.
    • "stretch": The container will stretch its height to the available remaining height of the parent container.

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",
		"height": "50px"
	  }
	]
  }
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "height": "50px" } ] }
Try it Yourself »

horizontalAlignment

Controls how this element is horizontally positioned within its parent.

  • Type: HorizontalAlignment
  • 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. Action.ShowCard is not supported.

  • Type: ISelectAction
  • Version : 1.1
  • Required: No
  • Allowed values:
    • Action.OpenUrl
    • Action.Submit
    • Action.ToggleVisibility

Example

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "TextBlock",
			"text": "Click the cat!",
			"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": "Click the cat!", "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.

  • Type: ImageSize
  • Required: No
  • Allowed values:
    • "auto": Image will scale down to fit if needed, but will not scale up to fill the area.
    • "stretch": Image with both scale down and up to fit as needed.
    • "small": Image is displayed with a fixed small width, where the width is determined by the host.
    • "medium": Image is displayed with a fixed medium width, where the width is determined by the host.
    • "large": Image is displayed with a fixed large width, where the width is determined by the host.

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 how this Image is displayed.

  • Type: ImageStyle
  • 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 »

width

The desired on-screen width of the image, ending in 'px'. E.g., 50px. This overrides the size property.

  • Type: string
  • Version : 1.1
  • Required: No

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",
		"width": "50px"
	  }
	]
  }
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png", "width": "50px" } ] }
Try it Yourself »

fallback

Describes what to do when an unknown element is encountered or the requires of this or any children can't be met.

  • Type: Element, FallbackOption
  • Version : 1.2
  • Required: No
  • Allowed values:
    • ActionSet
    • ColumnSet
    • Container
    • FactSet
    • Image
    • ImageSet
    • Input.ChoiceSet
    • Input.Date
    • Input.Number
    • Input.Text
    • Input.Time
    • Input.Toggle
    • Media
    • RichTextBlock
    • TextBlock
    • "drop": Causes this element to be dropped immediately when unknown elements are encountered. The unknown element doesn't bubble up any higher.

separator

When true, draw a separating line at the top of the element.

  • Type: boolean
  • Required: No

spacing

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

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

id

A unique identifier associated with the item.

  • Type: string
  • Required: No

isVisible

If false, this item will be removed from the visual tree.

  • Type: boolean
  • Version : 1.2
  • Required: No, default: true

requires

A series of key/value pairs indicating features that the item requires with corresponding minimum version. When a feature is missing or of insufficient version, fallback is triggered.

  • Type: Dictionary<string>
  • Version : 1.2
  • Required: No