Image data URI support

[matthidinger]

Release	Renderer status	Tasks status
1.2	✔️ .NET (#2131) ✔️ Android (#2129) ✔️ iOS (#2130) ✔️ TS (#2442) ✔️ UWP (#2128)	✔️ Shared (#2127)

Solves requests

• Embedding image data locally within card (Request: Allow embedding image data locally within card #1991)

Solution

The data URI scheme is a uniform resource identifier (URI) scheme that provides a way to include data in-line in web pages as if they were external resources.

Schema

Updated support on all image url properties to support data urls

AdaptiveCard

Property	Type	Required	Description
backgroundImage	string	false	An image to use as the background of the card. Supports data URI.

Image

Property	Type	Required	Description
url	string	false	The URL to the image. Supports data URI.

Action

Property	Type	Required	Description
iconUrl	string	false	The URL to the image. Supports data URI.

Example

Note: this already works in the HTML renderer since browsers support this. We would need to add support in the other renderers.

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "Image",
            "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAABfUlEQVRIS72UPU/DMBRF+69hYaJIbBUjfwFRkFCLKFH4iBQWOpeJbMBG5kzGJ+pLbOeFhKbhSkdW/O57t07dTowx/4K6OQaNjfXry9rK7IHInRuGaA011EM0n4PMrkLSNF1bzAhchEGaaTCceuegz68Pdb+NnYI2mzcay1WrazDfC0qSp06KoqCxXLW6BvOrIM0QIqcR8az5Qqz6BXFNGSqnEfHMPnWtT7Dyg57jRxPHcbnyhYeDu4SfPmYIDwm/WydICqvovlwJzvMcU2/hp09mCVbNoOhuVRn+EoaPHj6oILOs6iC36JoxdoVpIS5WfpCEhGHhbQtF3fW7MMuqeSKNLMswt4q61idY1UHL5cK0Eb467VnrE6z6Bck15+pyQdhj5RlRD3tcrLqDeMfyJ6rV2aeOT6uDF3Rze2WuF/uHuV6QZtoXXpBNPmeTT/Ab7itpq7NKyOV8fuAFAVdxWxzMds67zPaCYHY2O52eTM1Avo+OD8uTCF7IeJjJD3xajPLilAzRAAAAAElFTkSuQmCC",
            "style": "person"
        }
   ]
}

Host Config

No changes.

Down-level impact

Medium. Image is most likely dropped, but rest of card should theoretically display?

Renderer requirements

1. A renderer MUST parse the URI according to the Data URI spec
2. A renderer MUST display the image using the same mechanism as a remote image

Auto-generated task status

• Shared
• .NET
• Android
• iOS
• TS
• UWP

[mannby]

Supporting this would enable messaging-style scenarios, where there is no external source to reference.

[andrewleader]

@matthidinger what did you mean on the second renderer requirement, where you said it must "display the image using the same mechanism as a remote image"?

[andrewleader]

Temporarily re-opening for tool sync

[andrewleader]

Closing since all done