Image load issue in adaptive card in teams

Copper Contributor

I have an adaptive card  which is being opened in the task module by the bot in Teams app. The images are of size 15-25kb, but still these images are loaded lazily. This is hindering user experience badly.
Can I somehow get these images cached at Microsoft side before opening the task module?

 

Basically the images are opened sequentially when the task module opens.

 

Need some help here!

10 Replies
@TonyStark645 - Could you please share your adaptive card payload and images?

{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "Container",
"minHeight": "60px",
"items": [
{
"isSubtle": false,
"maxLines": 0,
"text": " ",
"type": "TextBlock"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"verticalContentAlignment": "Center",
"items": [
{
"isSubtle": false,
"maxLines": 0,
"text": " ",
"type": "TextBlock"
}
],
"height": "stretch",
"width": "stretch"
},
{
"type": "Column",
"width": 60,
"items": [
{
"type": "TextBlock",
"text": "Text-1",
"size": "Large",
"fontType": "Default",
"style": "columnHeader",
"isSubtle": false,
"horizontalAlignment": "Left",
"maxLines": 5,
"spacing": "Large",
"weight": "Default",
"color": "Dark",
"wrap": true
}
],
"verticalContentAlignment": "Top"
},
{
"type": "Column",
"verticalContentAlignment": "Center",
"items": [
{
"isSubtle": false,
"maxLines": 0,
"text": " ",
"type": "TextBlock"
}
],
"height": "stretch",
"width": "stretch"
}
],
"minHeight": "100px",
"spacing": "None"
},
{
"type": "Container",
"minHeight": "5px",
"items": [
{
"isSubtle": false,
"maxLines": 0,
"text": " ",
"type": "TextBlock"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "50",
"spacing": "None",
"items": [
{
"isSubtle": false,
"maxLines": 0,
"text": " ",
"type": "TextBlock"
}
]
},
{
"type": "Column",
"width": "55px",
"spacing": "None",
"items": [
{
"type": "Image",
"url": "icon_rating_1_unselected.png",
"altText": "Not easy at all",
"selectAction": {
"type": "Action.Submit",
"title": "One",
"data": {
"data": {
"requestType": "selection",
"choice_id": "rating_1",
"source": "1",
"total": "5",
"context": "eyJlbWFpbElkIjoidG9ueS5zdGFya0B6dzh5Yi5vbm1pY3Jvc29mdC5jb20iLCJxdWVzdGlvbklkIjozMiwiY2hvaWNlSWQiOjYsInB1bHNlU3VydmV5SW5zdGFuY2VJZCI6MTQ1Mywic2VydmljZVVzZXJJZCI6InRvbnkuc3RhcmtAenc4eWIub25taWNyb3NvZnQuY29tIiwidXNlclBlcnNvbmEiOiIxMDAxIn0=",
"updated": "true",
"choice_type": "rating",
"product_logo_url": "/null",
"product_name": "product-aee78ac4-a5ae-11ec-a202-0242ac110004",
"template_name": "t1",
"src_act_id": "1648471833308",
"expiry": "1648508847032",
"version": "2",
"survey_prod_inst": "1453",
"email": "Email address removed",
"prod_inst_user_id": "3768",
"msteams": {
"type": "task/fetch"
}
},
"msteams": {
"type": "task/fetch"
}
}
},
"height": "45px"
}
]
},
{
"type": "Column",
"width": "55px",
"spacing": "None",
"items": [
{
"type": "Image",
"url": "icon_rating_2_unselected.png",
"altText": "Somewhat easy",
"selectAction": {
"type": "Action.Submit",
"title": "Two",
"data": {
"data": {
"requestType": "selection",
"choice_id": "rating_2",
"source": "1",
"total": "5",
"context": "eyJlbWFpbElkIjoidG9ueS5zdGFya0B6dzh5Yi5vbm1pY3Jvc29mdC5jb20iLCJxdWVzdGlvbklkIjozMiwiY2hvaWNlSWQiOjcsInB1bHNlU3VydmV5SW5zdGFuY2VJZCI6MTQ1Mywic2VydmljZVVzZXJJZCI6InRvbnkuc3RhcmtAenc4eWIub25taWNyb3NvZnQuY29tIiwidXNlclBlcnNvbmEiOiIxMDAxIn0=",
"choice_type": "rating",
"product_logo_url": "/null",
"product_name": "product-aee78ac4-a5ae-11ec-a202-0242ac110004",
"template_name": "t2",
"updated": "true",
"version": "2",
"src_act_id": "1648471833308",
"survey_prod_inst": "1453",
"email": "Email address removed",
"prod_inst_user_id": "3768",
"msteams": {
"type": "task/fetch"
}
},
"msteams": {
"type": "task/fetch"
}
}
},
"height": "45px"
}
]
},
{
"type": "Column",
"width": "55px",
"spacing": "None",
"items": [
{
"type": "Image",
"url": "icon_rating_3_unselected.png",
"altText": "Fairly easy",
"selectAction": {
"type": "Action.Submit",
"title": "Four",
"data": {
"data": {
"requestType": "selection",
"choice_id": "rating_3",
"source": "1",
"total": "5",
"context": "eyJlbWFpbElkIjoidG9ueS5zdGFya0B6dzh5Yi5vbm1pY3Jvc29mdC5jb20iLCJxdWVzdGlvbklkIjozMiwiY2hvaWNlSWQiOjgsInB1bHNlU3VydmV5SW5zdGFuY2VJZCI6MTQ1Mywic2VydmljZVVzZXJJZCI6InRvbnkuc3RhcmtAenc4eWIub25taWNyb3NvZnQuY29tIiwidXNlclBlcnNvbmEiOiIxMDAxIn0=",
"choice_type": "rating",
"product_logo_url": "/null",
"product_name": "product-aee78ac4-a5ae-11ec-a202-0242ac110004",
"template_name": "t3",
"updated": "true",
"src_act_id": "1648471833308",
"version": "2",
"survey_prod_inst": "1453",
"email": "Email address removed",
"prod_inst_user_id": "3768",
"msteams": {
"type": "task/fetch"
}
},
"msteams": {
"type": "task/fetch"
}
}
},
"height": "45px"
}
]
},
{
"type": "Column",
"width": "55px",
"spacing": "None",
"items": [
{
"type": "Image",
"url": "icon_rating_4_selected.png",
"altText": "Very easy",
"selectAction": {
"type": "Action.Submit",
"title": "One",
"data": {
"data": {
"requestType": "selection",
"choice_id": "rating_4",
"source": "1",
"total": "5",
"context": "eyJlbWFpbElkIjoidG9ueS5zdGFya0B6dzh5Yi5vbm1pY3Jvc29mdC5jb20iLCJxdWVzdGlvbklkIjozMiwiY2hvaWNlSWQiOjksInB1bHNlU3VydmV5SW5zdGFuY2VJZCI6MTQ1Mywic2VydmljZVVzZXJJZCI6InRvbnkuc3RhcmtAenc4eWIub25taWNyb3NvZnQuY29tIiwidXNlclBlcnNvbmEiOiIxMDAxIn0=",
"choice_type": "rating",
"product_logo_url": "/null",
"product_name": "product-aee78ac4-a5ae-11ec-a202-0242ac110004",
"template_name": "t4",
"updated": "true",
"src_act_id": "1648471833308",
"version": "2",
"survey_prod_inst": "1453",
"email": "Email address removed",
"prod_inst_user_id": "3768",
"msteams": {
"type": "task/fetch"
}
},
"msteams": {
"type": "task/fetch"
}
}
},
"height": "45px"
}
]
},
{
"type": "Column",
"width": "50px",
"items": [
{
"type": "Image",
"url": "icon_rating_5_unselected.png",
"altText": "Extremely easy",
"selectAction": {
"type": "Action.Submit",
"title": "Five",
"data": {
"data": {
"requestType": "selection",
"choice_id": "rating_5",
"source": "1",
"total": "5",
"context": "eyJlbWFpbElkIjoidG9ueS5zdGFya0B6dzh5Yi5vbm1pY3Jvc29mdC5jb20iLCJxdWVzdGlvbklkIjozMiwiY2hvaWNlSWQiOjEwLCJwdWxzZVN1cnZleUluc3RhbmNlSWQiOjE0NTMsInNlcnZpY2VVc2VySWQiOiJ0b255LnN0YXJrQHp3OHliLm9ubWljcm9zb2Z0LmNvbSIsInVzZXJQZXJzb25hIjoiMTAwMSJ9",
"choice_type": "rating",
"product_logo_url": "/null",
"product_name": "product-aee78ac4-a5ae-11ec-a202-0242ac110004",
"template_name": "t5",
"updated": "true",
"src_act_id": "1648471833308",
"version": "2",
"survey_prod_inst": "1453",
"email": "Email address removed",
"prod_inst_user_id": "3768",
"msteams": {
"type": "task/fetch"
}
},
"msteams": {
"type": "task/fetch"
}
}
},
"height": "45px"
}
],
"spacing": "None"
},
{
"type": "Column",
"width": "50",
"spacing": "None",
"items": [
{
"isSubtle": false,
"maxLines": 0,
"text": " ",
"type": "TextBlock"
}
]
}
]
},
{
"type": "Container",
"minHeight": "5px",
"items": [
{
"isSubtle": false,
"maxLines": 0,
"text": " ",
"type": "TextBlock"
}
]
}
],
"verticalContentAlignment": "Center",
"minHeight": "495px"
}

TonyStark645_0-1649752873199.png

 

icon_rating_2_unselected.png

icon_rating_3_unselected.png

icon_rating_4_unselected.png

icon_rating_5_selected.png

 

 



@TonyStark645 - We are checking this internally. We will update you soon.

@TonyStark645 - We have checked with our images. But it was working fine at our end. The images are not loaded lazily.
Could you please share your images in zip folder to check at our end?

@Nivedipa-MSFTAttached the zip file

@Nivedipa-MSFT
Do you have any updates?

@TonyStark645 - We have checked this with your images. For first time when the task module opens the images are loading sequentially. But from next time the images are not loading sequentially and lazily.
Only for first time we are facing this issue.
As per my understanding the images are cached after first load. Thats why from second time they are not loaded lazily and sequentially.

@Nivedipa-MSFT - Saw this thread from a Google search.

 

I have a card with an image URL to a sharepoint site. If I update the file in sharepoint, then the cache isn't updated. Also, if the loading doesn't work, then the image doesn't appear -- and never appears.

Hello @reesehopkins - Once the images are shown locally, it caches the images, so you need to clear the Teams cache to freshly load the latest changes in it.