[Teams][Rendering] Markdown formatted text containing images not rendering on Teams

Platform

Microsoft Teams

Version of SDK

1.2

Details

We have a bot that is sending adaptive card responses on Teams. The bot renders results from QnA Maker answers into a card. The QnA Maker answers are formatted using markdown and some answers contain images. These images are not showing up on Teams, but do show up in the designer and the Bot Emulator.

The issue seems to exist in the FAQ Plus template as well.

QnA Answer (Markdown)

Click **Teams**\n\n![Teams button](https://support.content.office.net/en-us/media/20305b5c-df47-4154-a21a-b12712c4224c.png)\n\non the left side of the app, then click **Add team** at the bottom of your teams list. Go to the first tile in the **Suggested teams** view and click **Create a team**. From there, you can invite people or even entire contact groups (aka "distribution lists") to join your team. Now that you have a new team, why not [add some new channels](https://support.office.com/en-us/article/create-a-channel-in-teams-fda0b75e-5b90-4fb8-8857-7e102b014525) for specific conversation topics? Or even [invite guests](https://support.office.com/en-us/article/add-guests-to-a-team-in-teams-fccb4fa6-f864-4508-bdde-256e7384a14f) from outside your organization to help with a project?

The content was generated by QnA Maker from the following Teams FAQ page

JSON

{
    "type": "AdaptiveCard",
    "version": "1.2",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "'Click **Teams** ![Teams button](https://support.content.office.net/en-us/media/20305b5c-df47-4154-a21a-b12712c4224c.png) on the left side of the app, then click **Add team** at the bottom of your teams list. Go to the first tile in the **Suggested teams** view and click **Create a team**. From there, you can invite people or even entire contact groups (aka \"distribution lists\") to join your team. Now that you have a new team, why not [add some new channels]([https://support.office.com/en-us/article/create-a-channel-in-teams-fda0b75e-5b90-4fb8-8857-7e102b014525](https://support.office.com/en-us/article/create-a-channel-in-teams-fda0b75e-5b90-4fb8-8857-7e102b014525)) for specific conversation topics? Or even [invite guests]([https://support.office.com/en-us/article/add-guests-to-a-team-in-teams-fccb4fa6-f864-4508-bdde-256e7384a14f](https://support.office.com/en-us/article/add-guests-to-a-team-in-teams-fccb4fa6-f864-4508-bdde-256e7384a14f)) from outside your organization to help with a project?'",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "I think that is the answer (confidence score of 95%)",
            "wrap": true
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "data": {
                "type": "BotHelpful",
                "answer": "Click **Teams** ![Teams button](https://support.content.office.net/en-us/media/20305b5c-df47-4154-a21a-b12712c4224c.png) on the left side of the app, then click **Add team** at the bottom of your teams list. Go to the first tile in the **Suggested teams** view and click **Create a team**. From there, you can invite people or even entire contact groups (aka \"distribution lists\") to join your team. Now that you have a new team, why not [add some new channels](https://support.office.com/en-us/article/create-a-channel-in-teams-fda0b75e-5b90-4fb8-8857-7e102b014525) for specific conversation topics? Or even [invite guests](https://support.office.com/en-us/article/add-guests-to-a-team-in-teams-fccb4fa6-f864-4508-bdde-256e7384a14f) from outside your organization to help with a project?",
                "questionId": 158,
                "qnaId": 104
            },
            "title": "This is helpful"
        },
        {
            "type": "Action.Submit",
            "data": {
                "type": "BotUnhelpful",
                "questionId": 158,
                "qnaId": 0,
                "upn": "[e-mail]"
            },
            "title": "Tag Expert"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

Web Chat Designer ✅

Microsoft Teams Designer ✅

Microsoft Teams ❌

[Prasad-MSFT]

@mpelekh , we are able to repro the issue and raised a bug for this. Concerned team is looking into it. We will inform you once we get any update. Thanks!

[JeSuisUnCaillou]

I just found a workaround, and possibly an explanation of the bug.

This is the url of my image, in the markdown I send in my markdown :

In my markdown ![image](https://canbot-jam.s3.amazonaws.com/2021-02-10/1612972263-capture_d___e__cran_2021-02-10_a___16.49.06.png)

When I inspect my image in the teams web app and find its src, I can see it in the url param of a longer url, on skype.com :

This image doesn’t work https://urlp.asm.skype.com/v1/url/content?url=https%3A%2F%2Fcanbot-jam.s3.amazonaws.com%2F2021-02-10%2F1612972263-capture_d___e__cran_2021-02-10_a___16.49.06.png

I imagine this is an asset hosting service, which hosts the image redirects to the hosted url. And I can see that this image is 401 forbidden in the console.

After a thousand tests, I ended up having a random image displayed, and when I inspected it I saw a different hosting domain in the src :

This image works https://fr-prod.asyncgw.teams.microsoft.com/urlp/v1/url/content?url=https%3A%2F%2Fparticuliers.engie.fr%2Fcontent%2Fdam%2Fparticuliers-engie%2Fphotos%2Fhp%2Fok-illu-aucun-parrainage.png

So I tried to force the same hosting domain by putting it myself before my image url :

In my markdown ![image](https://fr-prod.asyncgw.teams.microsoft.com/urlp/v1/url/content?url=https%3a%2f%2fcanbot-jam.s3.amazonaws.com%2f2021-02-10%2f1612972263-capture_d___e__cran_2021-02-10_a___16.49.06.png)

And it worked !

I guess urlp.asm.skype.com currently has some issues.

TL;DR : prefix your image url with https://fr-prod.asyncgw.teams.microsoft.com/urlp/v1/url/content?url= (and encode the image url to be valid in the param, ofc)