Embedding Images in Power BI using Base64

January 2, 2018
Share this...
Tweet about this on TwitterShare on LinkedInShare on FacebookShare on Google+Pin on PinterestShare on Reddit

Hi readers, Happy New Year! It’s been a while since I blogged and a lot of changes have happened in the last one year, including me moving to Microsoft as a BI Technology Solution Professional in the Healthcare Vertical. As part of my new role, I get to spend a lot of time with customers educating them on Power BI and showing them how we can solve real world problems using Power BI. During these engagements, I also tend to get a lot of technical questions and one of the questions that came up recently was – How can I embed images for my data categories into Power BI without providing the image URLs?

image

As usual, my first question back to the customer was – why do you need this feature or what is the use case here? Some of the reasons he gave were:-

1) The image will be stored internally in the pbix file, so there would be no need to host the image somewhere else. Currently, they are downloading the images and hosting it on their SharePoint Online site.

2) Some of the public reports are using images that are hosted in public sites (like Wikipedia), and there is a chance that the image URLs might change (and hence stop displaying the image in the PBI report)

3) You can access the images offline (for eg, if you are working on Power BI Desktop and there is no internet connectivity).

 

And I completely understood his concerns as I had the same issue with some of the public facing reports that I made, for eg., the US Election report that I had made 1 year back. The images for the candidates were sourced from Wikipedia and certain candidates like George Bush, Donald Trump, etc. are not displayed, because the image URLs are no longer valid.

 

image

 

This is where you can use my workaround to embed the images within the report by converting the images into Base64. Follow the steps below:-

1) Choose the image that you want and use any Image to Base64 converter to get the Base64 code. I used this website but you can use any.

Convert to base64

 

2) Once you get the Base64 code, prefix it by data:image/jpeg;base64, and not you can use it as an expression in any calculated column. In my case, I want to create a new column that will display the existing URL link if the candidate is not George Bush or Donald Trump, and use this new base64 code for George Bush & Donald Trump.

Img = SWITCH([Nominee],
“George Bush”, “data:image/jpeg;base64, base64code“,
“Donald Trump”, “data:image/jpeg;base64, base64code
,[ImgUrl]
)

Note that I am not writing the actual base64 code in the formula above, as it is very long. You can substitute the base64 code in the yellow highlighted area.

image

3) Make sure that the category of the column is set to Image URL. Even if we are embedding the image, the data category has to be set as Image URL. This also enables us to mix and match as in my scenario, where some of the entries are coming in as actual URLs and some as base 64 code.

image

4) Now you can use this column in your report for displaying images. In my case, I am using the chiclet slicer to display the images. In the gif below, you can see how the original column (ImgUrl) is not working for George Bush and Donald Trump, but when I replace it with the new calculated column (Img) with the base64 code, it shows the appropriate images.

Displaying image as base 64

 

That said, there are some things that I have noticed while working with base64 code:-

1) Large images usually do not get displayed even if you paste the right base64 code. So make sure you are using small images with this method.

2) Since the base64 code can be really long, the code might soon get long & unwieldy if you are using it for multiple images.

3) Again, due to the length, you might not be able to add it to excel files (excel cells have a limit of 32,767 characters and the base64 code could easily be longer than that). Your best bet would be to add it as a calculated column most of the times.

 

Let me know in the comments if you notice anything else or have any more input on the same.

Update (01/05/2018)

Gerhard Brueckl (blog | twitter) has already taken this a step further and talks about automating the process by doing everything withing Power BI. Don’t forget to read his blog on this too – Storing Images in a PowerBI/Analysis Services Data Models

Posted by SQLJason

7 comments

Great post!


Maybe encode url once with R, and M (DAX would have been nice) for try online-url otherwise offline code64.

Jason, that’s a pretty cool trick. Thanks for sharing

Ásgeir Gunnarsson

Very nice post Jason.

Congratulation on your new position.

Thanks buddy! 🙂

Hello,

Power BI freezes trying this…

Try using a low resolution image. Ideally it should not freeze.

I’ve got a challenge for you.
I’m attempting to do something similar but for a report based on a streaming Pushed Dataset.
As such , I am still able to create a power BI report (rather than a using a dashboard tile) but I’m not importing the data, I don’t have access to edit query or any of the Modelling functionality.
So, can I still display conditional images, if I can’t define a column as an image?

Leave a Reply