Adaptive card images only showing on the webchat of azure bot but not in the MS teams desktop app.
ShobharajaNagarro opened this issue · comments
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
Could you please share the JSON representation of your card?
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 %"
}
]
}
]
}
]
}
]
}
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.
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
can you please help me here. I'm stuck
I don't see anything explicitly wrong with your card. Perhaps you can try outside the Developer Portal?
Were you able to test outside the Dev Portal or in the Teams web app? What were the results?
Closing due to inactivity.