How to add Background image to adaptive card bot framework

Question

I'm trying to add background image into Adaptive card. Currently I'm using adaptive card version 1.2 , I have added the image into a folder inside the project. But I'm getting Could not determine JSON object type for type AdaptiveCards.AdaptiveBackgroundImage exception.

 Uri uri = new System.Uri(@"~\Images\AdaptiveCard_Background.png",UriKind.Relative);
 card.Add(new AdaptiveBackgroundImage() 
 {
    Url = uri
 });

Kindly help me in resolving this issue

Take a look at https://stackoverflow.com/a/56080616/10708483 — tdurnford, Jul 24 '19 at 20:20

Priya G · Answer 1 · 2019-07-26T04:15:00.900

1

In your adaptive card, you can add a field "backgroundImage":

Something like this:

{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"backgroundImage":"https://i.pinimg.com/originals/e1/a9/a0/e1a9a0fa5a6d08336e32218f41ab4957.jpg",
"body":[
    // your adaptive card body here
    ],
"actions":[
    // your adaptive card actions here
]
}

You can find more adaptive cards samples here: https://adaptivecards.io/samples Hope that helps.

edited Jul 26 '19 at 04:15

answered Jul 26 '19 at 04:05

Priya G

63
1
5

You can check on the issue I posted. I have been using Background image in similar way. But it didn't work for me. – Gags08 Aug 12 '19 at 06:57

score 1 · Answer 2 · answered Feb 21 '20 at 11:03

After doing some research,I found out that for V4 solution, we need to add Images into a sub folder inside wwwroot folder. In appsettings.json file we need to mention the URL where we have hosted the file. If we are running it locally then we need to mention local emulator URL. Get the URL using IConfiguration

card.BackgroundImage = new Uri(configuration["BaseURI"] + "Images/BlueBackground.png");

Hope this helps other who are trying to use images inside card.

How to add Background image to adaptive card bot framework

2 Answers2