HTML Help Workshop - How to embed an image within a help file

Question

I'm attempting to embed an image within a HTM file which is part of my CHM file I'm trying to create. In my HTML File I'm referencing my image like so;

<img src='C:\\Users\\[user]\\Documents\\Images\\Settings-1.png'
                alt='Settings-1' />

My images still show once it's compiled however this Help File needs to be portable and I know once it's shipped these images will not show.

How would I go about solving this issue?

Answer 1

You could save the image inside the img tag as a base64-string

This question gives you a little more information on the subject.
Basically you convert your image to a base64-string
(a simple google-search gives tonnes of sites that do this for you)

You can now use that string as your src-attribute.

Answer 2

You can edit the project file (*.hhp) of HTML Help Workshop to embed any file you want to the CHM. It can be an image file, video file (SWF), PDF file, any file you want (of course the way to embed it into your HTML file change depending of the file type you're embeding).

E.g. If you have the following structure at your project:

.
└── Root/
    ├── index.html
    └── Settings-1.png

You can embed your image by using <img src="Settings-1.png" /> into your "index.html" file (it doesn't need to be this file, can be into any HTML file of your project).

The HTML Help Workshop is smart enough to detect that the "Settings-1.png" is embeded at one of yours HTML file and will add it automatically to your project.

If for some reason the HTML Help Workshop didn't embed this file as part of your CHM file (you can confirm this by opening the CHM file using 7-Zip), e.g. the image is referenced into a CSS file only (e.g. a background image set using CSS, so HTML Help Workshop can't detect that this image file is part of your HTML content), then edit the project file (*.hhp) of your project (it's basically a INI file with a custom extension) and add the relative path to your file at the [FILES] section of the project file:

[FILES]
index.html
Settings-1.png

Compile your file again and VOI LA! Your image file (or whatever file you want) will be embeded into your CHM file. You can confirm it by using 7-Zip.