Render Images which are Graph Hosted

[gavinbarron]

When the component detects that a message in a conversation contains an image that is hosted in Graph, we should render them.

The content we are getting from graph is like this:

// ...
"body": {
    "contentType": "html",
    "content": "<p>&nbsp;</p><p><img alt=\"image\" src=\"https://graph.microsoft.com/v1.0/chats/19:02b1868e-37e7-4c0e-a956-846dadaab298_7a11c66f-3bdc-4330-8c6a-05c4ee3aaa62@unq.gbl.spaces/messages/1679510263221/hostedContents/aWQ9eF8wLWV1cy1kMTEtZmYwNmJiNTM2MTNjMThmY2NiODg0ZDM5NzhjMGE5YzksdHlwZT0xLHVybD1odHRwczovL3VzLWFwaS5hc20uc2t5cGUuY29tL3YxL29iamVjdHMvMC1ldXMtZDExLWZmMDZiYjUzNjEzYzE4ZmNjYjg4NGQzOTc4YzBhOWM5L3ZpZXdzL2ltZ28=/$value\" width=\"315.884476534296\" height=\"250\" itemid=\"0-eus-d11-ff06bb53613c18fccb884d3978c0a9c9\" style=\"vertical-align:bottom\"></p><p>&nbsp;</p>"
},
// ...

We need to fetch this content and replace the image with the base64 content we were able to fetch. While the content is being loaded, we will render a spinner indicating that something is happening for the user.

Design

• [x] #2193 https://www.figma.com/file/2uBa2lODCTSj1CZSI6USee/Microsoft-Graph-Toolkit?node-id=10285%3A128073&t=xCnhRE7PNGMGeQoq-1

[ghost]

Hello gavinbarron, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌