Compartir a través de

Elemento de Imagen

Nota:

¿Está creando escenarios de Copilot, Teams o Outlook con tecnología de tarjetas adaptables? Visite el Centro de documentación de tarjetas adaptables, la nueva tienda única para todas sus necesidades de tarjeta adaptable. Tiene todos los recursos que busca, incluida la documentación completa para muchas características nuevas, como diseño dinámico, icono, distintivo, carrusel, gráficos, etc.

En esta página se documenta el elemento Image , un elemento de tarjeta en el esquema tarjetas adaptables.

Nota importante sobre la accesibilidad: En la versión 1.3 del esquema se introdujo una propiedad label en Entradas para mejorar la accesibilidad. Si la aplicación anfitriona a la que está orientando admite la versión 1.3, debe usar etiqueta en lugar de TextBlock, como se muestra en algunos ejemplos a continuación. Una vez que la mayoría de las aplicaciones host se hayan actualizado a la versión más reciente, actualizaremos los ejemplos según corresponda.

Imagen

Muestra una imagen. Los formatos aceptables son PNG, JPEG y GIF.

Propiedades de la imagen

Propiedad Tipo Obligatorio Description Versión
type "Image" Sí Debe ser "Image". 1,0
url uri Sí Dirección URL de la imagen. Admite el URI de datos en la versión 1.2 o posterior. 1,0
altText string No Texto alternativo que describe la imagen. 1,0
backgroundColor string No Aplica un fondo a una imagen transparente. Esta propiedad respetará el estilo de imagen. 1.1
height string, BlockElementHeight No, valor predeterminado: "auto" La altura deseada de la imagen. Si se especifica como un valor de píxel, finalizando en "px", por ejemplo, 50px, la imagen se distorsionará para ajustarse a esa altura exacta. Esto invalida la size propiedad . 1.1
horizontalAlignment HorizontalAlignment? No Controla cómo se coloca horizontalmente este elemento dentro de su elemento primario. Cuando no se especifica, el valor de horizontalAlignment se hereda del contenedor primario. Si no hay ningún contenedor primario establecido horizontalAlignment, el valor predeterminado es Left. 1,0
selectAction ISelectAction No Acción que se invocará cuando Image se pulse o seleccione . No se admite Action.ShowCard. 1.1
tamaño ImageSize No Controla el tamaño aproximado de la imagen. Las dimensiones físicas variarán según el anfitrión. 1,0
style ImageStyle No Controla cómo se muestra esto Image . 1,0
width string No Ancho deseado en pantalla de la imagen, que termina en "px". Por ejemplo, 50 píxeles. Esto invalida la size propiedad . 1.1

Propiedades heredadas

Propiedad Tipo Obligatorio Description Versión
Alternativa Element, FallbackOption No Describe qué hacer cuando se encuentra un elemento desconocido o no se pueden cumplir los requisitos de este o de cualquier elemento secundario. 1.2
separator boolean No Cuando true, dibuje una línea de separación en la parte superior del elemento. 1,0
espaciamiento Spacing No Controla la cantidad de espaciado entre este elemento y el elemento anterior. 1,0
ID string No Identificador único asociado al elemento. 1,0
isVisible boolean No, valor predeterminado: true Si false es cierto, este elemento se quitará del árbol visual. 1.2
Requiere Dictionary<string> No Serie de pares clave-valor que indican las características que el elemento requiere con la versión mínima correspondiente. Cuando una característica está ausente o una versión es inadecuada, se activa el mecanismo de respaldo. 1.2

Example

Ejemplo de imagen básica (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"
		}
	]
}

Propiedades

URL

Dirección URL de la imagen. Admite el URI de datos en la versión 1.2 o posterior.

  • Tipo: uri
  • Obligatorio: Sí

texto alternativo

Texto alternativo que describe la imagen.

  • Tipo: string
  • Obligatorio: No

backgroundColor

Aplica un fondo a una imagen transparente. Esta propiedad respetará el estilo de imagen.

  • Tipo: string
  • Versión: 1.1
  • Obligatorio: No

Ejemplo de BackgroundColor (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"
		}
	]
}

altura

El altura deseada de la imagen. Si se especifica como un valor de píxel, finalizando en "px", por ejemplo, 50px, la imagen se distorsionará para ajustarse a esa altura exacta. Esto invalida la size propiedad .

  • Tipo: string, BlockElementHeight
  • Versión: 1.1
  • Obligatorio: No, valor predeterminado: "auto"
  • Valores permitidos:
    • string
    • "auto": el alto del contenedor se determinará mediante el alto de su contenido.
    • "stretch": El contenedor estirará su altura al alto restante disponible del contenedor padre.

Ejemplo de altura (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"
	  }
	]
  }

horizontalAlignment

Controla cómo se coloca horizontalmente este elemento dentro de su elemento primario. Cuando no se especifica, el valor de horizontalAlignment se hereda del contenedor primario. Si no hay ningún contenedor primario establecido horizontalAlignment, el valor predeterminado es Left.

  • Tipo: HorizontalAlignment?
  • Obligatorio: No
  • Valores permitidos:
    • "left"
    • "center"
    • "right"

Ejemplo de 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"
		}
	]
}

seleccionarAcción

Acción que se invocará cuando Image se pulse o seleccione . No se admite Action.ShowCard.

  • Tipo: ISelectAction
  • Versión: 1.1
  • Obligatorio: No
  • Valores permitidos:
    • Action.Execute
    • Action.OpenUrl
    • Action.Submit
    • Action.ToggleVisibility

Ejemplo selectAction (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

Controla el tamaño aproximado de la imagen. Las dimensiones físicas variarán por host.

  • Tipo: ImageSize
  • Obligatorio: No
  • Valores permitidos:
    • "auto": La imagen se reducirá para ajustarse si es necesario, pero no se ampliará para rellenar el área.
    • "stretch": imagen con escalado hacia abajo y hacia arriba para ajustarse como se necesite.
    • "small": la imagen se muestra con un ancho pequeño fijo, donde el host determina el ancho.
    • "medium": la imagen se muestra con un ancho medio fijo, donde el host determina el ancho.
    • "large": la imagen se muestra con un ancho grande fijo, donde el host determina el ancho.

Ejemplo de tamaño (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"
		}
	]
}

style

Controla cómo se muestra esto Image .

  • Tipo: ImageStyle
  • Obligatorio: No
  • Valores permitidos:
    • "default"
    • "person"

Ejemplo de estilo (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"
						}
					]
				}
			]
		}
	]
}

Ancho

Ancho deseado en pantalla de la imagen, que termina en "px". Por ejemplo, 50 píxeles. Esto invalida la size propiedad .

  • Tipo: string
  • Versión: 1.1
  • Obligatorio: No

Ejemplo de ancho (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"
	  }
	]
  }

Reserva

Describa qué hacer cuando se encuentra un elemento desconocido o no se puedan satisfacer los requisitos de este o de cualquier elemento secundario.

  • Tipo: Element, FallbackOption
  • Versión: 1.2
  • Obligatorio: No
  • Valores permitidos:
    • ActionSet, ColumnSet, Container, FactSet, Image, ImageSet, Input.ChoiceSet, Input.Date, Input.Number, Input.Text, Input.Time, Input.Toggle, Media, RichTextBlock, Table, TextBlock
    • "drop": hace que este elemento se quite inmediatamente cuando se encuentren elementos desconocidos. El elemento desconocido no se propaga más arriba.

separador

Cuando true, dibuje una línea de separación en la parte superior del elemento.

  • Tipo: boolean
  • Obligatorio: No

espaciamiento

Controla la cantidad de espaciado entre este elemento y el elemento anterior.

  • Tipo: Spacing
  • Obligatorio: No
  • Valores permitidos:
    • "default", "none", "small", "medium", "large", , "extraLarge""padding"

id

Identificador único asociado al elemento.

  • Tipo: string
  • Obligatorio: No

isVisible

Si false es cierto, este elemento se quitará del árbol visual.

  • Tipo: boolean
  • Versión: 1.2
  • Obligatorio: No, valor predeterminado: true

Requiere

Serie de pares clave-valor que indican las características que el elemento requiere con la versión mínima correspondiente. Cuando una característica está ausente o una versión es inadecuada, se activa el mecanismo de respaldo.

  • Tipo: Dictionary<string>

  • Versión: 1.2

  • Obligatorio: No

  • Last updated on