Dynamic embedded images in Power BI

There are a load of examples of dynamic images being used in Power BI, however they all seem to use some sort of URL method of linking to the image. However, there is a method of loading the image into Power BI, but with some limitations.

How? Base64 and the HTML Viewer plugin.

The example Power BI file one the Git Hub link or from here

In my example, you take the image, PNG, JPEG etc and convert it to base64, there are a load on online converters, or do it in a bit of Python:

import base64
with open("D:\\Sandbox\\Test.png", "rb") as imageFile:
astr = base64.b64encode(imageFile.read())

converted = astr

t = open("D:\\Sandbox\\example.txt", "wb")
t.write(converted)
t.close()

So the image becomes a massive text string like the below fragment:

/9j/4QuLRXhpZgAATU………r3v3Xuve/de697917r//Z

Then you wrap it up in some HTML

<img src=”data:image/jpg;base64,/9j/4QuLRXhpZgAATU………r3v3Xuve/de697917r//Z”/>

And then get it into Power BI, in the below example I just copied and pasted it in.

Embedded Data

Once that is done use the HTML Viewer available in the Power BI Visual Store and add the data to it.

Queen Power BI

However after I’ve played around with it, there is a limitation. You are limited by file size to around 32Kb for a string length. Not to sure why, it could be something due to a column size, file, base64 limit, but as soon as it hits that limit is doesn’t display. So in the example I’ve used, the file size is 125 by 125 pixels. The HTML Viewer will not scale it up if you increase the visual size (and there is not that setting in the formatting options), but you can add some image size parameters to the HTML:

<img alt=”image” style=”height:200px;padding:0px;border:0px;” src=”data:image/jpeg;base64,/9j/4QuLRXhpZgAATU………r3v3Xuve/de697917r//Z”/>

So it should display it at a height of 200px, but beware of the jaggies.

 

 

One thought on “Dynamic embedded images in Power BI

Leave a Reply to Power BI Custom Visuals – My top picks part two – IT Consultant on the edge Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s