Power Platform Community Forum Thread Details

Hi,

I have a dataverse table with a text string column showing the id of an image blob in an Azure blob storage container. This allows me to easily preview the image in a canvas app using the GetFileContentV2 connector.

Now I'd like to preview this image in a model driven app using the same id column. I'm assuming this is done with a web resource component, but I've never created one of these or used one.

Any help would be greatly appreciated.

Thanks.

Categories:

Building Power Apps

@asafweis

To preview an image stored in Azure Blob Storage in a Model-Driven App using a Dataverse text column that holds the blob ID, you're right — the best approach is to use a Web Resource (typically an HTML web resource) that dynamically loads and displays the image.

Here’s a step-by-step guide to help you get started:

What You Need

Azure Blob Storage with public or SAS-token-based access to the images.
A Dataverse table with a column storing the blob ID or full URL.
A custom HTML web resource to render the image.
A form customization in your model-driven app to embed the web resource.

Step-by-Step Setup

1. Create the HTML Web Resource

Create a simple HTML file like this:

<!DOCTYPE html>

<html>

<head>

<title>Image Preview</title>

<style>

img {

max-width: 100%;

height: auto;

}

</style>

</head>

<body>

function loadImage() {

var blobId = Xrm.Page.getAttribute("your_column_name").getValue();

if (blobId) {

// Construct the full URL to the blob

var imageUrl = "https://yourstorageaccount.blob.core.windows.net/yourcontainer/" + blobId;

document.getElementById("previewImage").src = imageUrl;

}

window.onload = loadImage;

</script>

</body>

</html>

Replace:

your_column_name with the schema name of your Dataverse column.
The imageUrl construction logic with your actual blob URL pattern (or use a full URL if stored directly).

2. Upload the Web Resource

Go to Power Apps > Solutions.
Open your solution and click + New > Web Resource.
Upload the HTML file, give it a name like image_preview.html, and publish it.

3. Add the Web Resource to the Form

Open the form editor for your table.
Insert a Web Resource control.
Select your uploaded HTML file.
Pass the blob ID field as a parameter if needed (optional).
Set formatting (e.g., 300px height) and save/publish the form.

Optional Enhancements

Use a JavaScript web resource to dynamically pass the blob ID as a parameter.
Add error handling for missing or invalid images.
Use a SAS token if your blob storage is private.

🏷️ Tag me if you have any further questions or if the issue persists.

✅ Click "Accept as Solution" if my post helped resolve your issue—it helps others facing similar problems.

❤️ Give it a Like if you found the approach useful in any way.