Htmlviewer image display

I am trying to create an about box using html and displaying it with htmlviewer. I have two files the html about box and an icon. I dragged both into the navigator and load the page into the htmlviewer in the window open event. The page opens in the htmlviewer but the icon does not show. If I open the html with safari it shows properly. In htmlviewer all I get is a placeholder. The line in the html that addresses the icon is:

<td class="c2"><img class="c1" alt="Program Icon" src="./Icon64.png" /><br /></td>

I have tried …/Icon64.png, icon64.png, …/Resources/Icon64.png and numerous other attempts with no luck. How do I change the link to make it work?

If the icon is in the same folder as the HTML, this should work :

<td class="c2"><img class="c1" alt="Program Icon" src="Icon64.png" /><br /></td>

The debugger usually creates a new folder which would not have the icon.

Michel, I modified that line and it doesn’t seem to work either.
Dean, I have tried with the debugger and built application. In the built application the html file and .png are in the Resources folder. I did a show contents and went to the /Resources folder and again I can open the html file from there and the icon shows but not with the htmlviewer. In the meantime I have decided to go with a standard about box as described in Xdev 11.6.

Well something funky must be going on. I use this technique and the icon shows fine.
I do however copy the credits.html and image together with a copy step, but if the path is correct there shouldn’t be any issues. What makes me most curious is that you’re opening MyGreatApp.app/Contents/Resources/[mycredits].html in a browser and it’s loading the image.

Are you by chance using LoadPage? I don’t think LoadPage likes relative resources (from all of the fiddling I’ve done over the past monthish) Try using LoadURL(TPSF.Resources.child("credits.html").URLPath) and see if that helps.

Thanks Tim, that was it. The below code works for me.

dim f as folderitem = app.ExecutableFile.Parent.Parent.Child("Resources").Child("about_page.html") me.LoadURL(f.URLPath)

I was definitely using LoadPage. It seems that every day I find something to avoid in Xojo.

Sure loadpage works just dandy as long as you define the RELATIVE TO folder item correctly
We use it for the offline language reference
In this case it looks like

dim f as folderitem = app.ExecutableFile.Parent.Parent.Child("Resources")
would be the correct “relative to” folder item for using LoadPage

Thanks Norman, I didn’t understand the RELATIVE TO folder item functionality.

More or less “The base URL from which everything is relative to when trying to load using relative paths”

If you want to use an image that’s in Xojo in the HTML of an HTMLViewer, just encode the image and put it inline in the HTML…

[code]Function Str(image As Picture) As String
DIM returnValue As String = “”

if (image <> Nil) then
DIM aMemoryBlock As MemoryBlock = image.GetData(Picture.FormatPNG)
returnValue = “data:image/png;base64,” + EncodeBase64(aMemoryBlock, 0)
end if

Return returnValue
End Function[/code]

DIM html As String = "<td class=""c2""><img class=""c1"" alt=""Program Icon"" src=""%icon%"" /><br /></td>" html = html.Replace("%icon%", Str(Icon64)) HTMLViewer.LoadPage html, SpecialFolder.Temporary

This was all typed from memory, so may not work on first try…

1 Like

There you go. No more picture problem :wink:

[quote=165345:@Norman Palardy]Sure loadpage works just dandy as long as you define the RELATIVE TO folder item correctly
We use it for the offline language reference
In this case it looks like

dim f as folderitem = app.ExecutableFile.Parent.Parent.Child("Resources")
would be the correct “relative to” folder item for using LoadPage[/quote]
Really? Because I wasn’t able to get LoadPage to work properly using a relative to FolderItem while working on Answers.
LR says the relative to folder item needs to be a file not a directory (which is true, an exception gets raised if it’s a dir) however the images would not load. I’ll see if I can create a test project to show it breaking.

And here we are - project that shows LoadPage failing to load relative resources.
html.xojo_binary_project

Yes really
The local LR uses it extensively

I have been using LoadURL for quite a while. All pictures load with the most basic code. Maybe the simplest way to go.

Created a bug report since it seems nobody has a comment on the demo project that shows it clearly not working.
<https://xojo.com/issue/38080>

[quote=165594:@Tim Parnell]Created a bug report since it seems nobody has a comment on the demo project that shows it clearly not working.
<https://xojo.com/issue/38080>[/quote]

I don’t know what happened, but your sherbert.jpg is not valid. Nevertheless, pointing to a valid file does not help.

If you change the relative folder item to the imageFile itself, then it works fine.

I suspect the problem is that you are passing a temporary folder item that doesn’t exist…

I do suppose that would help. Fixed dropbox project, and uploading to feedback.

[quote=165603:@Michael Diehr]If you change the relative folder item to the imageFile itself, then it works fine.

I suspect the problem is that you are passing a temporary folder item that doesn’t exist…[/quote]
Why should it? That’s the point of using LoadPage, to avoid writing files to disk. The docs say “RelativeTo is a file (not a folder) used for resolving links and temporary files.” so the reference file would be the page you’re trying to display, not the image.

[quote=165605:@Tim Parnell]
Why should it? That’s the point of using LoadPage, to avoid writing files to disk. The docs say “RelativeTo is a file (not a folder) used for resolving links and temporary files.” so the reference file would be the page you’re trying to display, not the image.[/quote]
Its not - its just a file that gets treated as if it were the root file for the web site (think of it like the index.html file)
Everything else will be resolved relative to it
This is relevant because you’re going to provide the text for the page (ie/ index.html) as the first parameter
It can be empty
It just has to exist

And the example in the bug report is incorrect :stuck_out_tongue:
The file you use for “relative to” doesn’t exist so nothing relative to it can be resolved.
Michael is correct.

I know it seems odd but thats how the thing works