Images and GIFs from the internet in Power BI
Would you like to enrich your Power BI reports with images and GIFs? The HTML VizCreator Flex (old name: HTML & CSS Viewer) custom visual will help you embed externally hosted images or GIFs in an easy way. For instance, to display your company logo, visualized help section or specific symbols.
If you are looking for a way to add GIFs or images to Power BI but using a Microsoft-certified custom visual, head over to this article where we show you how it can be done using the HTML VizCreator Cert visual.
Embed Images and GIFs in Power BI with the HTML VizCreator Flex visual
To get started, download the sample report and use it as an example for your own report. You can find the HTML code used for the image or GIF as a measure. Simply copy & paste the HTML code into a measure in your report and adjust the source location and attributes to your needs. We recommend using the "width='100%'" attribute to achieve the best quality results. Alternatively, you may declare the size of images/GIFs in pixels.
Next, bring your newly created HTML measure to the HTML VizCreator Flex visual's “HTML” placeholder. The image/GIF should now be shown in your report.
Demo Report
Related HTML Knowledge
Image/GIF embedding uses the HTML "img" element which has several attributes:
- src: source of the image or GIF, is the URL (location of the file on the internet) (e.g. src='https://bisamurai.com/example.jpg')
- alt: alternative text, if the src could not be loaded. Always recommended (e.g., alt='BI Samurai Logo')
- width: specify the width of an image. This could be in pixel or %. Recommended to scale the image to the exact size effectively used in the report, which gives you the best quality
- height: same as width above
You find the full list of attributes and more examples in the Mozilla Developers Docs.
Next up, you could learn how to create an image slide show in Power BI report.