Show locally stored html including images using HtmlViewer

Desktop App for Windows and macOS

I’m trying to show a local html-page on a desktop app with HtmlViewer.
The html-file as well as the images used within the page are stored locally.

Therefore I’ve included the html-File in my project. I can open the file using:

Var f As FolderItem = FolderItem.TemporaryFile
htmlMain.LoadPage(myHTMLFile, f)

But what about the images the html-file refers to? Where should I store these?
Just dragging the image folder into the project as well doesn’t help.

How can I show a local website using images?

Thanks for any help

Our sample project for IMAP email client does this.
You store the html with image files in a temporary folder and load the URL for the html file.


Where can I find the sample project for IMAP email client ?

The problem with your design is when you will have a change in the html file.
But, you can store the html file and the folder (full of images…) beside it somewhere (in AppData) and load it at htmlviewer open time.

This allows you to modify the html and/or the images without the need to compile another application.

They need to be relative to the HTML file, and referred to properly within.
many web design tools ask for the name of your website and create links that a relative to that.

Look at your HTML
if your page is index.html and it lives in a folder that contains a folder called files,
an image can be referred to like this

<img src="file/myimage.gif" alt="words go here" >

if the image is in the same folder as the HTML file:

<img src="myimage.gif" alt="words go here" >

but if you have used some tool, you may find your Html code says:

<img src="C:/documents/myfiles/helppages/myimage.gif" alt="words go here" >

and that wont work on anybody else’s machine.

Thanks Jeff, I use a relative path to the image in the html-file:


That’s not the problem.

I’ve now made a build and copied the folder “images1” into the “Resources” folder.

When I double click the html-file in the resources-folder my browser opens it correctly and shows all the images included.

But when I start the exe file the HtmlViewer shows the text but non of the images.

What am I missing?

Do as I wrote: store the files (html and images) in AppData (Search SpecialFolder), then in the HTMLVierwer WIndow (Open Event), load the html file.

Also, using meaningful file name will help in the long run.

You can use Chrome to store a complete webpage as one single file, images included. This ccan easily be viewed within htmlviewer. I use this for aboutscreen and helpscreens within a desktop app.

@Oliver Janz — Folders are organized differently when you run a project in Debug mode or in a built application. It is very important that you use the right method to get the FolderItem you want.

Usually, it will imply using SpecialFolder

Do you have a hint for me how to store the html-file and the image-folder in AppData? Can I do that with a build-step? I’ve tried to do it, but it didn’t work.

Or do I have to drag all into my project and copy it on runtime into AppData?

@Joost: Safari can do that too, but I hate that.

Oliver: do you want to hide your html/images ? :wink:

Ups, did I aks something stupid?

I don’t know. There is no need to hide anything.

I think I undestand the way you proposed. I guess I also know how to read files out of the SpecialFolder AppData. But I can’t figure out how to copy it into this folder.

Have you seen:

In the FolderItem link ?

In the App.Open Event, check for the presence of your folder in AppData (name of the application used as folder name). If present, check for .Exists in the html and folder images items. If do not exists, copy then from beside your project to there.

At each run, the application will check in AppData if the files are there and eventually copy them.
Create a global property to that folder (and html file).

Then, in Window_HTMLViewer.Open, use the above Property to load the html (and the associated files).

Is it clear now ?

[quote=475603:@Oliver Janz]Thanks,

Where can I find the sample project for IMAP email client ?[/quote]
The example is included with MBS Xojo Plugins download in Examples/CURL folder.

Online you can look on code here:

BTW: SORRY, I only read now you have to use:

if you run API2 (and you run API2).

Why ? You can do the job without using any third party plugins.

Btw I don’t have an issue without the well known MBS plugins at all, but if I don’t need them for the job … and without using plugins it’s easier to share code with fellow developers who might not have a license for the plugins.

Yes. And when I need an image, I do not have to search around, then go back to internet to get it a second time.

Also, most of the attached items in Safari… I have to send the mail into another mail address I can access from Firefox: I nearly am never able to download the items from Safari (I do not know why, but I do not wasted my time there).

[quote=475626:@Oliver Janz]I asume that I need to include the html-file and the images folder somehow into the project. For example by copying both to the resources folder by using a buid-step.

Is that correct?[/quote]
No. I meant… put a new folder in the xojo project folder (near the project) and work from there. So you will not have to search where you put these files. :wink:

(I think I forgot something, but it is late in the afternoon and I have to move).
Doh ! I get it: you have to pack these file near the application in some way, so the Copy will work.

Ok, but how can I distribute the App then? How can I find the right path (source) on other machines to copy the files from?