Search code examples
c#botsadaptive-cards

Is there a way to use a local image in my C# Project for my Adaptive Card instead of an Web-URL?

I want to use a Adaptive Card inside my Bot, but i dont want to get the Image inside of it from a Web-URL. Instead i want to have the Image inside my Project and the Adaptive Card should reach the Image from from the Project-Folder. Is this possible and if so, how?

Solution

  • You can see in the schema explorer that Adaptive Card images support data URI's (embedded images) in version 1.2+. I was able to get an embedded image to render in an Adaptive Card like this:

    {
  "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
  "version": "1.2",
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Embedded Image"
    },
    {
      "type": "Image",
      "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKBJREFUeNpiYBjpgBFd4P///wJAaj0QO9DEQiAg5ID9tLIcmwMYsDgABhqoaTHMUHRxpsGYBv5TGqTIZsDkYWLo6gc8BEYdMOqAUQeMOoAqDgAWcgZAfB9EU63SIAGALH8PZb+H8v+jVz64KiOK6wIg+ADEArj4hOoCajiAqMpqtDIadcCoA0YdQIoDDtCqQ4KtBY3NAYG0csQowAYAAgwAgSqbls5coPEAAAAASUVORK5CYII="
    }
  ]
}

    enter image description here

    Notice that I picked a very small image because messages and attachments have size limitations. Embedding images is never recommended, but if you have a large image then it's impossible.

    If you know what image you want to use ahead of time then you can convert it to base 64 ahead of time and not even include the image in your project folder, but if you need help converting your local image into a data URI programmatically then you can have a look at the attachments sample.