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
{%
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:-
