Display Image of Product in Dynamics Portal

In this blog, i am going to discuss about “Image” type attribute/field display in Dynamics Portal. Here we have an Image for a Product, we will display this image on Dynamics Portal.

I am creating a Web Template with name Display_image_Product.

Put below code in Source.

// Get Product Id from URL and assign it in pid

 {% assign pid = request.params['id'] %}

   {% fetchxml my_query %}

    <fetch version="1.0" mapping="logical">

    <entity name="product">

      <attribute name="name" />

      <attribute name="productid" />

      <attribute name="entityimage" />

      <attribute name="entityimage_url" />

<filter type="and">

<condition attribute="productid" value="{{ pid }}" uitype="product" operator="eq"/>

</filter>

     </entity>

  </fetch>

{% endfetchxml %}

 {% for result in my_query.results.entities %}

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

<script type="text/javascript">

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));

}

// Find any entity images and convert the byte string to base64

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;

}

});

});

</script>

          

 {% endfor %}

In above code it will get a Product Guid and will fetch its related image.

Here i have used in my Portal and it looks like:-