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?

@help-info.de is there a better way of doing this rather than encoded the image? — benbants, May 17 '17 at 08:33
Convince whatever you use to create CHMs to add them to the project, and reference them with a local URL inside the html. Like the rest of the world does. — Marco van de Voort, Jun 01 '17 at 10:21

score 1 · Accepted Answer · edited May 23 '17 at 12:26

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.

edited May 23 '17 at 12:26

Community

1
1

answered May 16 '17 at 10:30

Anthony Dekimpe

357
2
14

Thanks for the help this has fixed my issue, although I'm not a fan of the length I'm more concerned about the portability. Once Again many thanks! – benbants May 16 '17 at 10:53

score 0 · Answer 2 · answered Jan 10 '23 at 02:15

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.

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

2 Answers2