Embedding Local Images using Data URIs

Sofia builds the article authoring tool for a knowledge-base SaaS. Support agents at her customers' companies use the WPF editor to write troubleshooting articles -- and those articles are heavy on screenshots. "Click File > Export > here is exactly what you should see." Without the screenshot the article is useless.

The customer her team had just onboarded had an extra requirement: their field technicians work in basement plant rooms and on offshore rigs where there is no internet, so the knowledge base also has to be exportable as a single-file offline help bundle. Each article becomes one self-contained HTML file the technician can open from a USB stick. No external image folder, no broken-image icons.

The problem: while an agent is authoring the article, the screenshots they drag in are local files. The editor records them as <img src="C:\\Users\\agent\\...">. The moment Sofia's export pipeline serialises the HTML and ships it to the offline bundle, those paths are dead weight.

The fix is a single call on the editor's content service:

editor.Content.EmbedLocalImagesAsBase64();

EmbedLocalImagesAsBase64 walks the document, finds every <img> whose src points at a local file, reads the file, Base64-encodes it, and rewrites the src as a data:image/...;base64,... URI. After the call, editor.DocumentHtml contains everything needed to render the article anywhere.

The transformation is easy to inspect. Before:

<p>Open the diagnostics panel:</p>

<img src="C:\Users\agent\Pictures\diag.png" alt="diagnostics" />

After:

<p>Open the diagnostics panel:</p>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="diagnostics" />

Sofia wired the call into her export button. Three lines do the whole self-contained export:

using System.IO;

using System.Windows;



private void ExportOfflineArticle_Click(object sender, RoutedEventArgs e)

{

    // 1. Embed every local image as a base64 data URI

    editor.Content.EmbedLocalImagesAsBase64();



    // 2. Pull the now self-contained article HTML

    string selfContained = editor.DocumentHtml;



    // 3. Write it to the offline bundle; the file no longer depends on the originals

    File.WriteAllText(@"C:\Output\article.html", selfContained);



    MessageBox.Show("Article exported. Drop it on any machine and the images stay.");

}

The technique is right for a few specific scenarios:

• Exporting single-file HTML (offline help, attached reports, archived snapshots).
• Storing the article HTML in a database column without a separate image table.
• Saving a draft and reopening it later on a different machine, with the screenshots intact.

Sofia did learn one thing the hard way: for sending HTML over email, data URIs are not the right tool. Several big email clients downsize or block Base64 images. For that case the editor offers a different method that uses CID-linked resources -- see Embedding Local Images for Email Clients. She uses both: data URIs for the offline bundle, CID for the "email this article to my team" button.

The field technicians stopped reporting broken screenshots in the offline help. That ticket queue went quiet.