Element obrazka

Uwaga / Notatka

Czy tworzysz scenariusze obsługiwane przez karty adaptacyjne dla Copilot, Teams lub Outlook? Odwiedź centrum dokumentacji kart adaptacyjnych— nowy, jednorazowy sklep dla wszystkich potrzeb karty adaptacyjnej. Zawiera wszystkie potrzebne zasoby, w tym kompletną dokumentację dla wielu nowych funkcji, takich jak układ dynamiczny, ikona, znaczek, karuzela, wykresy i wiele innych.

Ta strona dokumentuje element Image, który jest elementem karty w schemacie Adaptive Cards.

Ważna uwaga dotycząca ułatwień dostępu: W wersji 1.3 schematu wprowadziliśmy właściwość label dla danych wejściowych w celu zwiększenia ułatwień dostępu. Jeśli docelowa aplikacja hosta obsługuje v1.3, należy użyć Label zamiast TextBlock, jak pokazano w poniższych przykładach. Po zaktualizowaniu większości aplikacji Host do najnowszej wersji, odpowiednio zaktualizujemy przykłady.

obraz

Wyświetla obraz. Dopuszczalne formaty to PNG, JPEG i GIF.

Właściwości obrazu

Majątek Typ Required Description wersja
type "Image" Tak Musi mieć wartość "Image". 1.0
url uri Tak Adres URL obrazu. Obsługa danych URI w wersji 1.2 lub nowszej. 1.0
altText string Nie. Alternatywny tekst opisujący obraz. 1.0
Backgroundcolor string Nie. Zastosowuje tło na przezroczystych partiach obrazu. Ta właściwość będzie uwzględniać styl obrazu. 1.1
wysokość string, BlockElementHeight Nie, wartość domyślna: "auto" Żądana wysokość obrazu. Jeśli zostanie określona jako wartość w pikselach, kończąca się na 'px', np. 50px, obraz zostanie zniekształcony, aby dopasować dokładnie taką wysokość. To zastępuje właściwość size. 1.1
poziome wyrównanie HorizontalAlignment? Nie. Określa sposób, w jaki ten element jest ustawiony poziomo w obrębie elementu nadrzędnego. Jeśli nie zostanie określona, wartość poziomego wyrównania jest dziedziczona z kontenera nadrzędnego. Jeśli żaden kontener nadrzędny nie ma ustawionego parametru horizontalAlignment, wartość domyślna to Left (Lewy). 1.0
selectAction ISelectAction Nie. Akcja, która zostanie wywołana po naciśnięciu lub wybraniu Image . Action.ShowCard nie jest obsługiwana. 1.1
rozmiar ImageSize Nie. Określa przybliżony rozmiar obrazu. Wymiary fizyczne będą się różnić w zależności od hosta. 1.0
styl ImageStyle Nie. Określa sposób wyświetlania tego elementu Image . 1.0
Szerokość string Nie. Żądana szerokość obrazu na ekranie kończąca się ciągiem "px". Np. 50 pikseli. Nadpisuje właściwość size. 1.1

Właściwości dziedziczone

Majątek Typ Required Description wersja
Zapasowy Element, FallbackOption Nie. Opisuje, co należy zrobić, gdy napotkano nieznany element lub nie można spełnić wymagań tego elementu lub jakichkolwiek jego podrzędnych. 1.2
separator boolean Nie. Gdy true, narysuj linię oddzielającą u góry elementu. 1.0
Odstępy Spacing Nie. Określa odstęp między tym elementem a poprzednim elementem. 1.0
id string Nie. Unikatowy identyfikator skojarzony z elementem. 1.0
isVisible boolean Nie, wartość domyślna: true Jeśli false element zostanie usunięty z drzewa wizualnego. 1.2
Wymaga Dictionary<string> Nie. Seria par klucz/wartość wskazująca funkcje, które element wymaga wraz z odpowiednią minimalną wersją. Gdy brakuje funkcji lub jej wersja jest niewystarczająca, zostanie wyzwolone zastępcze rozwiązanie. 1.2

Example

Podstawowy przykład obrazu (JSON)

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

Właściwości

URL

Adres URL obrazu. Obsługa danych URI w wersji 1.2 lub nowszej.

  • Typ: uri
  • Wymagane: Tak

tekst alternatywny

Alternatywny tekst opisujący obraz.

  • Typ: string
  • Wymagane: Nie

backgroundColor

Nakłada tło na przezroczysty obraz. Ta właściwość będzie respektować styl obrazu.

  • Typ: string
  • Wersja: 1.1
  • Wymagane: Nie

BackgroundColor — przykład (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",
					"style": "person",
					"backgroundColor": "#982374",
					"url": "https://adaptivecards.io/content/cats/1.png",
					"altText": "Cat"
				}]
			},
			{
				"type": "Column",
				"width": "stretch",
				"items": [{
					"type": "Image",
					"backgroundColor": "#128192",
					"url": "https://adaptivecards.io/content/cats/1.png",
					"altText": "Cat"
				}]
			},
			{
				"type": "Column",
				"width": "stretch",
				"items": [{
					"type": "Image",
					"backgroundColor": "#183774",
					"url": "https://adaptivecards.io/content/cats/1.png",
					"altText": "Cat"
				}]
			}
		]
	}]
}

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "Image",
			"url": "https://adaptivecards.io/content/cats/2.png",
			"altText": "Cat",
			"size": "small",
			"backgroundColor": "#FF0000FF"
		},
		{
			"type": "Image",
			"url": "https://adaptivecards.io/content/cats/1.png",
			"altText": "Cat",
			"style": "person",
			"backgroundColor": "#FFFF0000"
		}
	]
}

height

Żądana wysokość obrazu. Jeśli zostanie określona jako wartość w pikselach, kończąca się wartością "px", np. 50px, obraz będzie zniekształcony, aby dopasować dokładnie taką wysokość. Zastępuje to właściwość size.

  • Typ: string, BlockElementHeight
  • Wersja: 1.1
  • Wymagane: Nie, wartość domyślna: "auto"
  • Dozwolone wartości:
    • string
    • "auto": Wysokość kontenera będzie określana przez wysokość jego zawartości.
    • "stretch": Kontener rozciągnie swoją wysokość do dostępnej wysokości nadrzędnego kontenera.

Przykład wysokości (JSON)

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

poziome wyrównanie

Określa sposób, w jaki ten element jest umieszczony w poziomie w obrębie elementu nadrzędnego. Jeśli nie zostanie określona, wartość poziomego wyrównania jest dziedziczona z kontenera nadrzędnego. Jeśli żaden kontener nadrzędny nie ma ustawionego parametru horizontalAlignment, wartość domyślna to Left (Lewy).

  • Typ: HorizontalAlignment?
  • Wymagane: Nie
  • Dozwolone wartości:
    • "left"
    • "center"
    • "right"

Przykład użycia HorizontalAlignment (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": "https://adaptivecards.io/content/cats/1.png",
			"altText": "Cat",
			"size": "medium",
			"horizontalAlignment": "left"
		},
		{
			"type": "TextBlock",
			"text": "horizontalAlignment:center",
			"weight": "bolder",
			"horizontalAlignment": "center"
		},
		{
			"type": "Image",
			"url": "https://adaptivecards.io/content/cats/1.png",
			"altText": "Cat",
			"size": "medium",
			"horizontalAlignment": "center"
		},
		{
			"type": "TextBlock",
			"text": "horizontalAlignment:right",
			"weight": "bolder",
			"horizontalAlignment": "right"
		},
		{
			"type": "Image",
			"url": "https://adaptivecards.io/content/cats/1.png",
			"altText": "Cat",
			"size": "medium",
			"horizontalAlignment": "right"
		}
	]
}

wybierzDziałanie

Akcja, która zostanie wywołana po naciśnięciu lub wybraniu Image . Action.ShowCard nie jest obsługiwana.

  • Typ: ISelectAction
  • Wersja: 1.1
  • Wymagane: Nie
  • Dozwolone wartości:
    • Action.Execute
    • Action.OpenUrl
    • Action.Submit
    • Action.ToggleVisibility

SelectAction Example (JSON)

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
		{
			"type": "TextBlock",
			"text": "Click the cat!",
			"weight": "bolder"
		},
		{
			"type": "Image",
			"url": "https://adaptivecards.io/content/cats/1.png",
			"altText": "Cat",
			"selectAction": {
				"type": "Action.OpenUrl",
				"tooltip": "cool link",
				"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
			}
		}
	]
}

size

Określa przybliżony rozmiar obrazu. Wymiary fizyczne będą się różnić w zależności od hosta.

  • Typ: ImageSize
  • Wymagane: Nie
  • Dozwolone wartości:
    • "auto": Obraz będzie skalowany w dół, aby zmieścić się w razie potrzeby, ale nie będzie skalowany w górę, aby wypełnić obszar.
    • "stretch": Obraz z skalowaniem w dół i w górę, aby dopasować się do potrzeb.
    • "small": Obraz jest wyświetlany ze stałą małą szerokością, gdzie szerokość jest określana przez hosta.
    • "medium": Obraz jest wyświetlany ze stałą średnią szerokością, gdzie szerokość jest określana przez hosta.
    • "large": Obraz jest wyświetlany ze stałą dużą szerokością, gdzie szerokość jest określana przez hosta.

Przykład rozmiaru (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": "https://adaptivecards.io/content/cats/1.png",
			"altText": "Small cat",
			"size": "small"
		},
		{
			"type": "TextBlock",
			"text": "size:medium",
			"weight": "bolder",
			"size": "large"
		},
		{
			"type": "Image",
			"url": "https://adaptivecards.io/content/cats/1.png",
			"altText": "Medium cat",
			"size": "medium"
		},
		{
			"type": "TextBlock",
			"text": "size:large",
			"weight": "bolder",
			"size": "large"
		},
		{
			"type": "Image",
			"url": "https://adaptivecards.io/content/cats/1.png",
			"altText": "Large cat",
			"size": "large"
		}
	]
}

styl

Określa sposób wyświetlania tego elementu Image .

  • Typ: ImageStyle
  • Wymagane: Nie
  • Dozwolone wartości:
    • "default"
    • "person"

Przykład stylu (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": "https://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg",
							"altText": "Person",
							"style": "default"
						}
					]
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "style: person",
							"weight": "bolder"
						},
						{
							"type": "Image",
							"url": "https://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg",
							"altText": "Person",
							"style": "person"
						}
					]
				}
			]
		}
	]
}

width

Żądana szerokość obrazu na ekranie, która kończy się na 'px'. Np. 50 pikseli. Zastępuje to właściwość size.

  • Typ: string
  • Wersja: 1.1
  • Wymagane: Nie

Przykład szerokości (JSON)

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

Zapasowy

Opisuje, co należy zrobić, gdy napotkany zostanie nieznany element lub nie można spełnić wymagań tego lub elementów podrzędnych.

  • Typ: Element, FallbackOption
  • Wersja: 1.2
  • Wymagane: Nie
  • Dozwolone wartości:
    • ActionSet ColumnSet Container FactSet Image ImageSet Input.ChoiceSet Input.Date Input.Number Input.Text Input.Time Input.Toggle Media RichTextBlock Table TextBlock
    • "drop": Powoduje natychmiastowe usunięcie tego elementu po napotkaniu nieznanych elementów. Nieznany element nie propaguje się wyżej.

separator

Gdy true, narysuj linię oddzielającą u góry elementu.

  • Typ: boolean
  • Wymagane: Nie

Odstępy

Określa odstęp między tym elementem a poprzednim elementem.

  • Typ: Spacing
  • Wymagane: Nie
  • Dozwolone wartości:
    • "default", "none", , "small", "medium", "large", , "extraLarge""padding"

id

Unikatowy identyfikator skojarzony z elementem.

  • Typ: string
  • Wymagane: Nie

isVisible

Jeśli false element zostanie usunięty z drzewa wizualnego.

  • Typ: boolean
  • Wersja: 1.2
  • Wymagane: Nie, wartość domyślna: true

Wymaga

Seria par klucz/wartość wskazująca funkcje, które element wymaga wraz z odpowiednią minimalną wersją. Gdy brakuje funkcji lub jej wersja jest niewystarczająca, zostanie wyzwolone zastępcze rozwiązanie.

  • Typ: Dictionary<string>

  • Wersja: 1.2

  • Wymagane: Nie

  • Last updated on