Adaptive card images only showing on the webchat of azure bot but not in the MS teams desktop app.

[ShobharajaNagarro]

Version

I'm using bot framework composer 2.1.2

Describe the bug

Adaptive card images only showing on the webchat of azure bot but not in the MS teams desktop app. Please refer to the attached screenshot also find the url to the image which is public.

Screenshots

URL detail

example URL to image: https://openweathermap.org/img/wn/10d.png

Mostly the url remains the same {code} part will change generic url: https://openweathermap.org/img/wn/{code}.png

[anishprasad01]

Hi @ShobharajaNagarro,

Could you please share the JSON representation of your card?

[ShobharajaNagarro]

@anishprasad01

Please find the adaptive card json

{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.3", "backgroundImage": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Background.jpg", "body": [ { "type": "TextBlock", "text": "Cityname", "weight": "Bolder", "size": "ExtraLarge", "wrap": true }, { "type": "TextBlock", "text": "dayOfWeek, Date", "spacing": "None", "wrap": true }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "Image", "url": "https://openweathermap.org/img/wn/10d.png", "size": "Medium", "altText": "description" } ] }, { "type": "Column", "width": "auto", "items": [ { "type": "TextBlock", "text": "temp", "size": "ExtraLarge", "spacing": "None", "wrap": true } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "°C", "weight": "Bolder", "spacing": "Small", "wrap": true } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "High", "horizontalAlignment": "Left", "wrap": true }, { "type": "TextBlock", "text": "Low", "horizontalAlignment": "Left", "spacing": "None", "wrap": true }, { "type": "TextBlock", "text": "Humidity", "horizontalAlignment": "Left", "spacing": "None", "wrap": true } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "temp_max °C", "horizontalAlignment": "Left", "wrap": true }, { "type": "TextBlock", "text": "temp_min °C", "horizontalAlignment": "Left", "spacing": "None", "wrap": true }, { "type": "TextBlock", "text": "humidity %", "horizontalAlignment": "Left", "spacing": "None", "wrap": true } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "dayOfWeek", "wrap": true }, { "type": "Image", "url": "https://openweathermap.org/img/wn/10d.png", "size": "Medium", "altText": "description" }, { "type": "FactSet", "facts": [ { "title": "High", "value": "temp_max °C" }, { "title": "Low", "value": "temp_min °C" }, { "title": "Hum", "value": "humidity %" } ] } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "dayoftheweek", "wrap": true }, { "type": "Image", "url": "https://openweathermap.org/img/wn/10d.png", "size": "Medium", "altText": "description" }, { "type": "FactSet", "facts": [ { "title": "High", "value": "temp_max °C" }, { "title": "Low", "value": "temp_min °C" }, { "title": "Hum", "value": "humidity %" } ] } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "${dialog.dayoftheweek[dayOfWeek(formatEpoch(int(dialog.filteredList[3].dt)))]}", "wrap": true }, { "type": "Image", "url": "https://openweathermap.org/img/wn/10d.png", "size": "Medium", "altText": "description" }, { "type": "FactSet", "facts": [ { "title": "High", "value": "temp_max °C" }, { "title": "Low", "value": "temp_min °C" }, { "title": "Hum", "value": "humidity %" } ] } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "${dialog.dayoftheweek[dayOfWeek(formatEpoch(int(dialog.filteredList[4].dt)))]}", "wrap": true }, { "type": "Image", "url": "https://openweathermap.org/img/wn/10d.png", "size": "Medium", "altText": "description" }, { "type": "FactSet", "facts": [ { "title": "High", "value": "temp_max °C" }, { "title": "Low", "value": "temp_min °C" }, { "title": "Hum", "value": "humidity %" } ] } ] } ] } ] }

[anishprasad01]

Formatting for cards in Teams is a little different than formatting cards for Web Chat. See the documentation on Cards in Teams for more details.

[ShobharajaNagarro]

@anishprasad01

i tried it in developer portal of teams. It works fine. But when i click on "Send me this card" this is what i'm getting in the chat

[ShobharajaNagarro]

Hi @anishprasad01

can you please help me here. I'm stuck

[anishprasad01]

I don't see anything explicitly wrong with your card. Perhaps you can try outside the Developer Portal?

[anishprasad01]

Were you able to test outside the Dev Portal or in the Teams web app? What were the results?

[dmvtech]

Closing due to inactivity.