Getting images to be dynamic, such as changing in reaction to an change in the selected value of a slicer seems to have limited out of the box solutions in Power BI (at the time of this blog).
The solutions I have seen involve sourcing the images from a URL (already hosted images). Which is fine if you have access to a webserver to host them, but if you don’t you may feel you are stuck.
If you don’t have access to a webserver to host your images, you can host the images as text in two ways.
To demonstrate using SVGs I sourced some from Font Awesome.
To demonstrate using Base64 encoding I got a png of an emoji and used a Base64 Image converter to convert to Base64.
I will demo this using a MySQL database. SQL code from Github repository
DROP TABLE `powerbi_image`; CREATE TABLE `powerbi_image` ( `picture_id` int NOT NULL AUTO_INCREMENT , `picture_name` varchar(100) NULL DEFAULT NULL , `picture_type` varchar(100) NULL DEFAULT NULL , `picture_source_code` longtext NULL DEFAULT NULL , PRIMARY KEY (`picture_id`) ) COLLATE='latin1_swedish_ci' ENGINE=MyISAM ; -- The full code containing the SVG and Base64 images -- is in this associated repo which is linked above INSERT INTO `powerbi_image` (`picture_name`, `picture_type`, `picture_source_code`) values ('smile', 'svg', '<html><svg><path d=""/></svg></html>') , ('icecream', 'svg', '<html><svg><path d=""/></svg></html>') , ('avocado', 'base64', '<html><img src="data:image/png;base64,"/></html>') ;
I connected Power BI to the MySQL table and on the canvas I have added three visualizations:
- slicer (sourcing from the picture_name)
- card (sourcing the picture_type)
- HTML content (sourcing the picture_source_code)
The result is an image which updates in reaction to the changing selected value in the slicer.