Unable to Display Azure Blob Storage Images in HTML Content Lite Visual in Power BI

1. Ensure the Images Are Accessible via a URL

The HTML Content Lite visual requires publicly accessible URLs for images. Since your blob container is private, you'll need to generate Shared Access Signature (SAS) URLs or use a proxy service.

2. Generate SAS URLs for Each Image

Since the container is private, direct access won’t work. Use a SAS token to generate temporary URLs for the images.

Steps to Generate SAS URLs:

1. Go to Azure Portal → Storage Account → Blob Containers.
2. Select the private container where the images are stored.
3. Click on a blob (image) and generate a SAS token and URL.
4. Use the SAS URL in Power BI.

   💡 Tip: If you need to display multiple images dynamically, store the SAS token in your dataset and concatenate it with the blob URL.

   ---

   3. Store SAS URLs in Your Dataset

   Modify your dataset to include the full SAS URL for each image. If the blob name is stored in a column (ImageName), create a calculated column in Power Query or DAX:

   Power Query (M) Example:

    

   M

   CopyEdit

   = Table.AddColumn(Source, "ImageURL", each "https://yourstorageaccount.blob.core.windows.net/yourcontainer/" & [ImageName] & "?sv=yourSASsignature")

    

   DAX Example:

    

   DAX

   CopyEdit

   ImageURL = "https://yourstorageaccount.blob.core.windows.net/yourcontainer/" & Table[ImageName] & "?sv=yourSASsignature"

    

   ---

   4. Display Images in HTML Content Lite Visual

   Once your dataset has valid SAS URLs, use the following HTML inside the HTML Content Lite visual:

    

   html

   CopyEdit

   <img src="{ImageURL}" style="width:100%; height:auto;">

   💡 Ensure the column is categorized as "Image URL" in Power BI.