How to display an img tag in html

[Abhi1222]

Hi folks,

I am trying to read group chat messages from MS GRAPH API where one of the message body content is an screenshot which returns the following

<p>&nbsp;</p> <p><img alt="image" src="https://graph.microsoft.com/v1.0/chats/19:04564476148143d387f8b658894321b9@thread.v2/messages/1709011814869/hostedContents/aWQ9eF8wLWV1cy1kNS1kYTkzYmM0YWZiYmUyZmEyZjAyN2YzYzk2MGQ3MWI4Nyx0eXBlPTEsdXJsPWh0dHBzOi8vdXMtYXBpLmFzbS5za3lwZS5jb20vdjEvb2JqZWN0cy8wLWV1cy1kNS1kYTkzYmM0YWZiYmUyZmEyZjAyN2YzYzk2MGQ3MWI4Ny92aWV3cy9pbWdv/$value" width="378.83141762452107" height="250" itemid="0-eus-d5-da93bc4afbbe2fa2f027f3c960d71b87" style="vertical-align:bottom"></p> <p>&nbsp;</p>"

But ...

In this case the if i try to open or convert the link to a blob it throws the following error 

{"error":{"code":"InvalidAuthenticationToken","message":"Access token is empty.","innerError":{"date":"2024-02-28T07:18:48","request-id":"e84b43a5-9e72-4ae5-bd35-a6c2d2703f3d","client-request-id":"e84b43a5-9e72-4ae5-bd35-a6c2d2703f3d"}}}

How can i read and display the img as part of the message in html .

Note : I am already reading standard texts and attachments with no issues. 

Thanks,

Abhinay 

[#2]

Hello @Abhi1222 ,
Please ensure that you have a valid access token with the necessary permissions to access the image URL.
You can use the Microsoft Graph API to fetch the image content and then embed it in your HTML content.

[#3]

Hello @Abhi1222 - Please confirm if your issues has resolved?
If not, could you please share the complete code, so that we can try to repro it from our end?

[#4]

@ChetanSharma-msft 

Still have the issue. 

onPressChat: async function (oEvent) {
			
			const chatId = "Your CHAT ID";
			const getAllMessages = await this.getMyChatMessages(graphClient, chatId);
			this.getView().getModel('peopleListModel').setProperty('/selectedChatId', chatId);
			console.log(getAllMessages);
			const messagesArray = []
			for (let messages of getAllMessages.value) {
				if (messages.messageType === "message") {
					var pic = await this.getPhoto(graphClient, messages.from.user.id);
					if (messages.attachments.length > 0) {

						for (var attachment of messages.attachments) {
							if (messages.attachments.contentType === "reference") {
								messagesArray.push({
									bodyContent: '<p> ' + messages.body.content + '</p> <a href=\"' + attachment.contentUrl +
										'\" style=\"color:green; font-weight:600;\">' + attachment.name + '</a>',
									createdDateTime: new Date(messages.createdDateTime),
									fromUser: messages.from.user,
									displayPic: pic
								})
							} 
						}
					} else {

						messagesArray.push({
							bodyContent: messages.body.content,
							createdDateTime: new Date(messages.createdDateTime),
							fromUser: messages.from.user,
							displayPic: pic
						})
					}

				}
			}
			console.log(messagesArray);
			// Sort the array in descending order by date using regular functions
			const sortedData = messagesArray.sort(function (a, b) {
				return a.createdDateTime - b.createdDateTime;
			});
			this.getView().getModel('peopleListModel').setProperty('/feedItemsCollection', messagesArray);

		},

I am reading the messages as below

getMyChatMessages: async function (graphClient, chatId) {
			this.ensureScope('chat.readwrite.all');
			return await graphClient
				.api('/me/chats/' + chatId + '/messages').top(50)
				.get();
		},

In one of the message i have a screenshot sent from MS Teams ..

to be precise it return as below 

"<p>&nbsp;</p>
<p><img alt="image" src="https://graph.microsoft.com/v1.0/chats/"Your CHAT ID"/messages/1709011814869/hostedContents/aWQ9eF8wLWV1cy1kNS1kYTkzYmM0YWZiYmUyZmEyZjAyN2YzYzk2MGQ3MWI4Nyx0eXBlPTEsdXJsPWh0dHBzOi8vdXMtYXBpLmFzbS5za3lwZS5jb20vdjEvb2JqZWN0cy8wLWV1cy1kNS1kYTkzYmM0YWZiYmUyZmEyZjAyN2YzYzk2MGQ3MWI4Ny92aWV3cy9pbWdv/$value" width="378.83141762452107" height="250" itemid="0-eus-d5-da93bc4afbbe2fa2f027f3c960d71b87" style="vertical-align:bottom"></p>
<p>&nbsp;</p>"

Thanks,

Abhinay

[#5 · Accepted solution]

Hello @Abhi1222 - You please use Get chatMessageHostedContent to get the hosted contents.
Reference doc: https://learn.microsoft.com/en-us/graph/api/chatmessagehostedcontent-get?view=graph-rest-1.0&tabs=ht...