Delphi HTMLViewer: load a local help document and give its images a reference path

The HtmlViewer project provides THtmlViewer, TFrameViewer, and TFrameBrowser. Start with the single-document control for an application's help pane. Check the repository's installation instructions and your compiler compatibility before adding the package; older Delphi examples can depend on different component releases.

Package a help page with its supporting image

For an original workshop-app fixture, ship these files together:

WorkshopApp.exe
help/
  return.html
  images/
    return-label.png

The page can start with a small document that uses the packaged image:

<!doctype html>
<html>
<head><title>Return the workshop recorder</title></head>
<body>
  <h1>Return the workshop recorder</h1>
  <p>Attach the return label to the carrying case.</p>
  <img src="images/return-label.png" alt="Return label placement">
  <p><a href="#inspection">Check before leaving</a></p>
  <h2 id="inspection">Check before leaving</h2>
  <p>Confirm the recorder and charger are both in the case.</p>
</body>
</html>

Use your actual image in the packaged folder. The code does not create one, and a visible image in a desktop browser does not prove the Delphi package can locate it.

Load the file from the application's directory

In a VCL form with a THtmlViewer component named HtmlViewer1, a file-loading fragment is:

uses
  System.SysUtils;

procedure TMainForm.ShowReturnHelp;
var
  HelpFile: string;
begin
  HelpFile := IncludeTrailingPathDelimiter(
    ExtractFilePath(ParamStr(0))) + 'help\return.html';
  HtmlViewer1.LoadFromFile(HelpFile);
end;

This resolves the help file relative to the executable rather than the process's current directory. A shortcut can start an application with a different working directory, so test that launch route too. Add the form declaration, installed component unit, and the application's own missing-file handling around this fragment.

The component source defines LoadFromFile and the string-loading overload. Check those signatures against your installed release before adapting an older tutorial.

Supply a reference when the HTML comes from a string

If the application generates the instruction text, retain a reference location for its relative assets:

procedure TMainForm.ShowGeneratedReturnHelp;
var
  ReferenceFile, HelpHtml: string;
begin
  ReferenceFile := IncludeTrailingPathDelimiter(
    ExtractFilePath(ParamStr(0))) + 'help\return.html';
  HelpHtml := '<html><body>' +
    '<h1>Return the recorder</h1>' +
    '<p>Include the charger in the carrying case.</p>' +
    '<img src="images/return-label.png" alt="Return label">' +
    '</body></html>';
  HtmlViewer1.LoadFromString(HelpHtml, ReferenceFile);
end;

The second argument is the document reference, not a command to write HelpHtml to disk. It gives the string-loaded document a location context. The expected image remains the packaged help\images\return-label.png.

Keep dynamic text escaped for its HTML context when assembling the document. Inserting a user-entered equipment name directly between markup delimiters can change the document structure. Treat generated text, attribute values, and permitted links according to their separate contexts.

Decide what a link is allowed to do

An internal fragment link, another bundled help page, and an external website are different navigation requests. OnHotSpotClick exposes the target and a Handled flag; implement the application's intended policy using the event signature from the installed component.

For an offline help pane, allow the intended help navigation and handle external links explicitly. Do not pass arbitrary link strings to a shell command. If the application opens an approved website in the system browser, validate its scheme and destination first and keep failures visible.

This viewer's supported HTML and layout behavior also need checking against the actual help page. A script-driven web application may need an embedded browser engine. The Windows WebView2 guide discusses that different rendering boundary in a .NET application; its code is not interchangeable with this Delphi component.

Test the installed application with its real files

Open the file-backed help page, confirm the label image, and follow the internal “Check before leaving” link. Then load the string-generated version and check the same image under the supplied reference. Launch from a shortcut whose working directory differs from the executable directory and repeat the image check.

Finally, run the packaged app on the deployment layout you intend to distribute. The installer must include the supporting image and help folder. The reader should be able to confirm the recorder and charger instruction without knowing which directory the application started in.