Forum Discussion

Abhi1222's avatar
Abhi1222
Copper Contributor
Feb 28, 2024
Solved

How to display an img tag in html

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 

Chat
files
microsoft teams

4 Replies

  • Vaibhav-MSFT's avatar
    Vaibhav-MSFT
    Brass Contributor
    Feb 29, 2024

    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.

    • ChetanSharma-msft's avatar
      ChetanSharma-msft
      Icon for Microsoft rankMicrosoft
      Mar 03, 2024
      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?
      • Abhi1222's avatar
        Abhi1222
        Copper Contributor
        Mar 03, 2024

        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

         

         

Resources