Displaying Dataverse images in PowerApps Portal

Question

I'm trying to display the image attributes from Dataverse in the PowerApps Portal. I know the documentation says that this isn't officially supported I've seen a few unofficial guides like https://www.itaintboring.com/powerapps/lets-show-an-image-on-the-power-apps-portal-form-too/ which seems promissing.

My only problem with that solution is that it requires hard-coded URL's in the Portal which doesn't work for us as we have a CD pipeline with multiple environments. Is there another way to do this? Or can I somehow query for the URL instead of hardcoding it?

Answer 1

I don't have enough reputation to add a comment so I'm posting it as answer.

1. you can retrieve the supporting image_url column value. The URL is stored in supporting imageColumn_url column. Full URL should be something like this {organization_URL}/image/download.aspx?entity={table_name}&attribute={column_name}&id={entityImageId}&timestamp={image_timestamp} and can be used as src in img tag.

2. in the img tag set data-entityimage to be the image column. On window load convert entity image to base64 source.

    <img data-entityimage="{{ imageColumn | join: ',' }}"  />
   

   function toBase64(str) { if (!str) return null; var uarr = new Uint8Array(str.split(',').map(function (x) { return parseInt(x); })); return btoa(String.fromCharCode.apply(null, uarr)); }

    window.addEventListener('load', function () {
       document.querySelectorAll('img[data-entityimage]').forEach(function (img) {
           var data = img.dataset && img.dataset.entityimage;
           var base64data = data ? toBase64(data) : null;
           if (base64data) {
              img.src = 'data:image/jpeg;base64,' + base64data;
           }
      });
    });
   

With (1) you are retrieving full sized image, and with (2) the thumbnail that is stored in cds