Dynamics 365 Business Central: How to preview image/picture in web client without downloading (Enlarging image)

Hi, Readers.
Today I would like to discuss an interesting topic, how to preview image/picture in web client without downloading (Enlarging image).

In Business Central 2025 wave 1 (BC26), Microsoft released the Preview PDF attachments directly in web client feature. This feature lets you open PDF attachments directly in the Business Central web client without downloading them first. Files are shown in preview mode in a specialized viewer experience, similar to the print preview feature, and you can always download a PDF file from there. More details: Business Central 2025 wave 1 (BC26): Preview PDF attachments directly in web client (No control add-in and APIs)

However, this feature cannot preview formats other than PDF, such as images.

In Dynamics 365 Business Central: Preview files within BC (PDF, JPG, PPTX, DOCX, XLSX, TXT, CSV, MP4…… Most file types supported for previewing files in SharePoint) – No JavaScript control add-in, we discussed how to use the Graph API to save files to SharePoint and then preview them. Although this can preview the image, it is quite complicated.

Today I want to share a simple method to preview pictures in web client, just using HTML, here is a simple example.

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

• src – Specifies the path to the image
• alt – Specifies an alternate text for the image, if the image for some reason cannot be displayed

We can display the image through HTML Image Src with BC. This requires a little simple conversion.

I mentioned this method when discussing Dynamics 365 Business Central: How to preview Base64 string image within BC (Base64 Image Viewer).

So two steps are needed, first convert the image to base 64, then display it through HTML. But first you need to create a page to display the image.

PS: To be compatible with older versions, I used the Card page. Starting from BC26, you can use the new UserControlHost PageType. More details: Business Central 2025 wave 1 (BC26): UserControlHost PageType (New Page type)

Then let’s look at two simple examples.

1. Add the Preview image action on the Document Attachment Details (1173, List) page to preview the image.

Test video:

2. Preview the image on the Item Card.

Test video:

Very simple, give it a try!!!😁

Source code: Github (Please note that the source code is for reference only, you can improve it according to your own needs)

pageextension 50110 DocumentAttachmentDetailsExt extends "Document Attachment Details"
{
    actions
    {
        addafter(Preview_Promoted)
        {
            actionref(PreviewImage_Promoted; PreviewImage)
            {
            }
        }
        addfirst(processing)
        {
            action(PreviewImage)
            {
                Caption = 'Preview Image';
                ApplicationArea = All;
                Image = View;

                trigger OnAction()
                var
                    PreviewFiles: Page "Preview Files";
                    DocAttach: Record "Document Attachment";
                    HTMLImgSrcTok: Label 'data:image/%1;base64,%2', Locked = true;
                    HTMLText: Text;
                    Base64String: Text;
                    Base64Convert: Codeunit "Base64 Convert";
                    InStr: InStream;
                    OutStr: OutStream;
                    TempBlob: Codeunit "Temp Blob";
                begin
                    DocAttach.Reset();
                    CurrPage.SetSelectionFilter(DocAttach);
                    if DocAttach.FindFirst() then
                        if DocAttach."Document Reference ID".HasValue then begin
                            TempBlob.CreateOutStream(OutStr);
                            DocAttach."Document Reference ID".ExportStream(OutStr);
                            TempBlob.CreateInStream(InStr);
                            Base64String := Base64Convert.ToBase64(InStr);
                            HTMLText := '<img src=' + StrSubstNo(HTMLImgSrcTok, 'Jpeg', Base64String) + '>';
                            PreviewFiles.SetURL(HTMLText);
                            PreviewFiles.Run();
                        end;
                end;
            }
        }
    }

}
page 50111 "Preview Files"
{
    Caption = 'Preview';
    Editable = false;
    PageType = Card; //Use new UserControlHost PageType from BC26

    layout
    {
        area(content)
        {
            usercontrol(WebPageViewer; WebPageViewer)
            {
                ApplicationArea = All;
                trigger ControlAddInReady(callbackUrl: Text)
                begin
                    CurrPage.WebPageViewer.SetContent(HTMLText);
                end;

                trigger Callback(data: Text)
                begin
                    CurrPage.Close();
                end;
            }
        }
    }
    var
        HTMLText: Text;

    procedure SetURL(NavigateToURL: Text)
    begin
        HTMLText := NavigateToURL;
    end;
}

pageextension 50111 ItemPictureExt extends "Item Picture"
{
    actions
    {
        addafter(ExportFile)
        {
            action(PreviewImage)
            {
                Caption = 'Preview Image';
                ApplicationArea = All;
                Image = View;

                trigger OnAction()
                var
                    PreviewFiles: Page "Preview Files";
                    ItemTenantMedia: Record "Tenant Media";
                    HTMLImgSrcTok: Label 'data:image/%1;base64,%2', Locked = true;
                    HTMLText: Text;
                    Base64String: Text;
                    Base64Convert: Codeunit "Base64 Convert";
                    InStr: InStream;
                begin
                    if Rec.Picture.Count > 0 then begin
                        ItemTenantMedia.Get(Rec.Picture.Item(1));
                        ItemTenantMedia.CalcFields(Content);
                        ItemTenantMedia.Content.CreateInStream(InStr, TextEncoding::UTF8);
                        Base64String := Base64Convert.ToBase64(InStr);
                        HTMLText := '<img src=' + StrSubstNo(HTMLImgSrcTok, 'Jpeg', Base64String) + '>';
                        PreviewFiles.SetURL(HTMLText);
                        PreviewFiles.Run();
                    end;
                end;
            }
        }
    }
}

END

Hope this will help.

Thanks for reading.

ZHU