Schema Explorer

Choose element:

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

JSON

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

Adaptive Card

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

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

JSON

{
	"$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"
				}]
			}
		]
	}]
}

Adaptive Card

{ "$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" }] } ] }] }

JSON

{
	"$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"
		}
	]
}

Adaptive Card

{ "$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" } ] }

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.

JSON

{
	"$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"
	  }
	]
  }

Adaptive Card

horizontalAlignment

Controls how this element is horizontally positioned within its parent.

Type: HorizontalAlignment
Required: No
Allowed values:
- "left"
- "center"
- "right"

JSON

{
	"$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"
		}
	]
}

Adaptive Card

{ "$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" } ] }

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

JSON

{
	"$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"
			}
		}
	]
}

Adaptive Card

{ "$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" } } ] }

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.

JSON

{
	"$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"
		}
	]
}

Adaptive Card

{ "$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" } ] }

style

Controls how this Image is displayed.

Type: ImageStyle
Required: No
Allowed values:
- "default"
- "person"

JSON

{
	"$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"
						}
					]
				}
			]
		}
	]
}

Adaptive Card

{ "$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" } ] } ] } ] }

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

JSON

{
	"$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"
	  }
	]
  }

Adaptive Card

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

Schema Explorer

Image

Example

Properties

url

altText

backgroundColor

height

horizontalAlignment

selectAction

size

style

width

fallback

separator

spacing

id

isVisible

requires

Learn

Blog