Schema Explorer

Image

Displays an image.

Property Type Required Description Version
altText string No Alternate text describing the image. 1.0
horizontalAlignment string No, default: "left" Controls how elements are horizontally positioned within their container. 1.0
selectAction object No An Action that will be invoked when the Image is tapped or selected. Action.ShowCard is not supported. 1.1
size string 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. 1.0
style string No Controls how this Image is displayed. 1.0
type "Image" Yes Must be "Image". 1.0
url string Yes The URL to the image. 1.0
id string No A unique identifier associated with the element. 1.0
spacing string No Controls the amount of spacing between this element and the preceding element. 1.0
separator boolean No, default: false When true, draw a separating line at the top of the element. 1.0

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 describing the image.

  • Type: string
  • Required: No

horizontalAlignment

Controls how elements are horizontally positioned within their container.

  • Type: string
  • Required: No, default: "left"
  • 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: object
  • Required: No

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 »

imageSize

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: string
  • 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": "ImageSet",
			"imageSize": "small",
			"images": [
				{
					"type": "Image",
					"url": "http://adaptivecards.io/content/cats/1.png"
				},
				{
					"type": "Image",
					"url": "http://adaptivecards.io/content/cats/2.png"
				},
				{
					"type": "Image",
					"url": "http://adaptivecards.io/content/cats/3.png"
				},
				{
					"type": "Image",
					"url": "http://adaptivecards.io/content/cats/1.png"
				},
				{
					"type": "Image",
					"url": "http://adaptivecards.io/content/cats/2.png"
				},
				{
					"type": "Image",
					"url": "http://adaptivecards.io/content/cats/3.png"
				}
			]
		}
	]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "ImageSet", "imageSize": "small", "images": [ { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/2.png" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/3.png" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/2.png" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/3.png" } ] } ] }
Try it Yourself »

style

Controls how this Image is 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: Yes
  • Allowed values:
    • Image

url

The URL to the image.

  • Type: string
  • Required: Yes
  • Format: uri

id

A unique identifier associated with the element.

  • Type: string
  • Required: No

spacing

Controls the amount of spacing between this element and the preceding 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

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

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