Show images from SharePoint Enhanced rich text enabled multiple lines of text fields in PowerApps

Within a SharePoint list, you can create a multiple lines of text field and set its type to Enhanced rich text to allow showing pictures inside of the field. This works perfect when you’re just using the SharePoint list with no customization. But when you decide to make a PowerApp for that specific list, something may go wrong.

The problem(s)

The first problem you run in to when creating a PowerApp for this kind of list is that your Enhanced rich text isn’t shown correctly by default, because it will put all data into a label control. Since the data in SharePoint is stored in your multiple lines of text field as HTML encoded text, your label doesn’t know how to deal with this:

Luckily, PowerApps has a HTML text control that allows your PowerApp to render the HTML correctly. So I added the HTML text control, set its HtmlText property to show the value from the Answer field and set the Visible property of the Label control to false. Now we should have a nice and clean lay-out, or so you think:

As you can see, the HTML encoding is gone, but the image doesn’t show. How is this possible?


To find out, I decided to take a closer look into how the HtmlText property of my HTML Text control is rendered. So I created a new item that only contains an image (so that my HTML is as ‘clean’ as possible). I also re-enabled the label in PowerApp so that I could see the HTML encoded text

The HTML I was looking for is as follows:

<img src="/sites/RikTest0012/SiteAssets/Lists/FAQ/NewForm/About365Favicon.png" alt="About365Favicon.png" style="margin&#58;5px;width&#58;400px;height&#58;400px;" />58;400px;" /&amp;gt;

This immediately showed me what was went wrong in the HTML Text control:

Incorrect HTML rendering:

The HtmlText property expects its value to be as follows:

“Show your <b><font color=blue>HTML</font></b> text here.” (with the quotes)

So the HtmlText that is generated from your SharePoint field is as follows:

"<img src="/sites/RikTest0012/SiteAssets/Lists/FAQ/NewForm/About365Favicon.png" alt="About365Favicon.png" style="margin&#58;5px;width&#58;400px;height&#58;400px;" />"

Because of the quotes, the HTML text control sees some parts of the <img> tag (such as the first part) as a string and doesn’t render it as an image.

The solution for this is to replace each double quote (“) by a single quote (‘) by using the Substitute() function:


What we do here is we replace the double quote value of Parent.Default (which is the value stored in the Answer field) for a single quote value. For those of you wondering why I am replacing two double quotes: I’m not, but for the same reason the HTML rendering doesn’t work, I can’t just set one double quote. I have to escape it by using another double quote in front of it. Trust me, this will replace the double quotes for a single quote.

Relative vs. Absolute URL

Unfortunately, the image still doesn’t show as you can see in the screenshot above. That’s because SharePoint uses a relative URL inside the <img> tag, but PowerApps doesn’t know the context of the SharePoint site the image is in. Because of that, you have to do another Substitute() action over the previous Substitute() action where you replace the relative URL for a absolute URL:


What we do here is we replace the relative URL of our previous Substitute() action with the absolute URL. After this, your HtmlText should render correctly:

After disabling the Label again, my PowerApp now works as it should:

8 Replies to “Show images from SharePoint Enhanced rich text enabled multiple lines of text fields in PowerApps”

  1. Hi Rik,

    I tried above solution and your approach really helped me, but…
    it only works for me when I add the image directly in the SharePoint list. I would like it to work also when I drag an image into the Rich Text Editor control in PowerApps. That RTE control does show the picture when I use the Substitute function but it is not able to display the image afterwards when the image is added through drag&drop. Is there a way to use the HTMLtext control to add images directly in PowerApps, or is there a way to display the image in the RTE control afterwards (when reopening the item)?

    1. As far as I know, there is no support for images in the Rich Text Editor. Images do show within the editor if you drag them into it, but the control does not know how to handle (and store) them, so they will just be ignored.
      Makes sense in some kind of way, because Power Apps has no idea of how and where to store these images because the control itself has no direct relation with SharePoint, even if you place it inside a SharePoint connected form. It still is a custom control after you’ve added it manually.
      I’ve tried it for myself and I do see an tag being created inside the SharePoint field, but as I guessed there is no link to the image because it cannot be stored anywhere:  

  2. Thanks for sharing the article. I have tried the same, it only works if you are also logged into sharepoint site. if you are not logged in to sharepoint and use power app, system doesn’t show the images.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.