Working with Relative Urls

Any document you build in the WPF HTML Editor is likely to live alongside its own images - handbook screenshots, product diagrams, a company logo - referenced by relative path so the pair travels together and keeps working after you publish it somewhere else. Documents can reference images with relative URLs, such as images/leave-policy.png, so the HTML stays portable and still resolves after publishing to a different host (for example, an internal SharePoint page). While authoring, those images exist as files on disk next to the document, and the editor needs to be told where to find them. This page shows how to set that folder so relative URLs resolve correctly, both in the editor and in the built-in image picker.

Set BaseUrl on the WpfHtmlEditor to the folder that holds those images, so relative URLs resolve correctly while editing:

private void OnLoaded(object sender, RoutedEventArgs e) {     editor.BaseUrl = Path.Combine(AppContext.BaseDirectory, "handbook-content"); }

Private Sub OnLoaded(sender As Object, e As RoutedEventArgs)     editor.BaseUrl = Path.Combine(AppContext.BaseDirectory, "handbook-content") End Sub

With BaseUrl set, relative URLs in the document resolve against that folder. An <img src="leave-policy.png" /> tag renders correctly in the editor, and the built-in image picker dialog opens on the same folder by default, so authors do not have to navigate the file system every time they insert a screenshot.

Two options handle the save-time URL rewrite. ConvertFileUrlsToLocalPaths turns file:///D:/handbook/content/images/x.png into D:\handbook\content\images\x.png. ConvertAbsoluteUrlsToRelativeUrls then trims away the part that matches BaseUrl, leaving the relative remainder your target host expects.

editor.Options.ConvertFileUrlsToLocalPaths = true;
editor.Options.ConvertAbsoluteUrlsToRelativeUrls = true;

editor.Options.ConvertFileUrlsToLocalPaths = True
editor.Options.ConvertAbsoluteUrlsToRelativeUrls = True

A hyperlink containing a space in its URL can break a published page. Set UrlEncodeHyperlinkHRefs to percent-encode the href attribute on save, so href="Q1 Reports/index.html" becomes href="Q1%20Reports/index.html". The visible link text stays exactly as typed; only the URL is encoded.

editor.Options.UrlEncodeHyperlinkHRefs = true;

editor.Options.UrlEncodeHyperlinkHRefs = True

BaseUrl, ConvertFileUrlsToLocalPaths, ConvertAbsoluteUrlsToRelativeUrls, and UrlEncodeHyperlinkHRefs all live on the shared SpiceLogic.HtmlEditor.Abstractions.IEditorOptions contract, so the same configuration code works against both the WPF and WinForms editors. If your application uses both (for example, WPF for authoring and WinForms for a PDF generator on a build server), write one helper that takes IEditorOptions and reuse it from both.

Ask your AI to do this

Using the SpiceLogic WPF HTML Editor already referenced in my project, set up the editor so images referenced by relative paths like images/leave-policy.png keep resolving correctly while authoring and after I save the document: set BaseUrl on the editor to the folder holding the images, for example D:\handbook\content, and enable Options.ConvertFileUrlsToLocalPaths together with Options.ConvertAbsoluteUrlsToRelativeUrls so a file:/// path picked from the image dialog gets rewritten back to a relative path on save. Also turn on UrlEncodeHyperlinkHRefs in case the folder name contains spaces. Confirm the exact IEditorOptions member names with the SpiceLogic MCP tools before writing any code.