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="...
Chat
files
microsoft teams
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