Android Question Local HTML page does not show pictures

MitchBu

Well-Known Member
Licensed User
Longtime User
I display local html file in a WebView. It works, but the pictures in the html page do not show. They are coded to be next to the html page, and I verified the pictures files are indeed there, as expected.

Example code. Nothing unusual or fancy :

B4X:
<img src="buttonpopup.png" align="BOTTOM" border="0" width="20">

What could be preventing them to display ?
 

warwound

Expert
Licensed User
Longtime User
<img src="buttonpopup.png" align="BOTTOM" border="0" width="20">

Try modifying the src path so the WebView knows exactly where your image file is located:

B4X:
<img src="file:///android_asset/buttonpopup.png" align="BOTTOM" border="0" width="20">

That assumes your image file is not in a sub-directory of your files folder.
 
Upvote 0

MitchBu

Well-Known Member
Licensed User
Longtime User
Yes, indeed, I came to believe I need to use an absolute path. But path will not be the same in debug as in release. I had hoped by putting the picture file next to the HTML page it would work in relative.

I will try to embed the picture as Base64.

Thanks warwound. BTW congratulations for WebViewExtras.
 
Last edited:
Upvote 0

MitchBu

Well-Known Member
Licensed User
Longtime User

Yes, you are right. I already use WebViewAssetFile to get the html file.

Embedding an image in the HTML code does work, but since I need it many times in an HTML table for buttons, I am now going to try WebView.LoadHTML and place the URL to the file at run time, so I can place the proper absolute path.
 
Upvote 0

MitchBu

Well-Known Member
Licensed User
Longtime User
Follow-up :

Now I load the html page into a variable, so I can replace the picture file name by a full absolute path.

It works very nicely, but the HTML page load time is not negligible, about one second, and that feels strange.

Is there any way I can place this data in a constant in a separate module somewhere, so I don't mess up Globals ?

Otherwise I thought about placing that into a sub that returns it, placed at the very end of the code.


.
 
Upvote 0

warwound

Expert
Licensed User
Longtime User
That one second load time might be the WebView being slow to render your HTML, or it might be your b4a code building the large HTML string.
Are you using a StringBuilder to build your HTML string or string concatenation?
Try a Stringbuilder and see if that improves the time taken to create your HTML string.
 
Upvote 0

MitchBu

Well-Known Member
Licensed User
Longtime User
Yes, it could be concatenation when I read the file line by line. I could not locate a method to read everything at one with TextReader.

I will learn StringBuilder.

Thank you Martin.
 
Upvote 0

MitchBu

Well-Known Member
Licensed User
Longtime User
I know this is an old thread, but I picked up from there in my development course.

In short, html src with ".unpacked" in the picture name would not work. No dice. So I could not use picture files from assets. Strangely enough, I could loadURL the picture file, but if it was inside a page, it would not display.

My solution was to use base64 encoded pictures in the HTML source.

Here is the page that describes the technique:

I use Bluegriffon to edit and compose my HTML page. It is a free WYSIWYG HTML editor, which displays base64 encoded pictures just fine:

Hope this will be of use fo others bumping into the same issue.
 
Upvote 0
Top