Can't load images for local html file in WebView, is it possible?

Gerard_J · January 22, 2015, 10:50pm

Hello.

As part of A game I’m working on I’m trying to display the instructions as an html file using a webview,

I’m trying to do it that way because I find it easier to manage all the text and graphics in different languages this way.

I intend to use the same graphics that I use for some ingame content.

The text in the html shows correctly, however none of the images load.

I’ve tryed different formats (png, jpg) and locations (placing images inthe root or asubfolderor placing the htmland the images in a folder) to no avail

I just get question marks indicating that the images weren’t loaded.

Is there a way to achieve this?

In the following thread someone states that this is possible using the full path for the files

http://forums.coronalabs.com/topic/39015-can-webview-reference-images-in-resourcedirectory/?hl=%2Bwebview+%2Bimages

system.ResourceDirectory … /filename.png

But I don’t know how to modify the html so the paths match that one.

Isn’t it possible to do this somehow using just the realtive path?

I intend to use this in both android and iOS in case that makes a difference.

Thanks!

James_Sherburne · January 23, 2015, 1:48am

Gerard,

This is indeed possible. First, the HTML file must be in the Project folder (same folder as main.lua), or a subdirectory of it. The image files should be in the same folder as the HTML file, or a subdirectory of it. This code will show the webView, it has been tested:

local webView local doc = "yourfile.html" webView = native.newWebView( 0, display.contentWidth, 320, 480 ) webView.anchorX = 0 webView.anchorY = 0 webView:request( doc , system.ResourceDirectory )

If your image files are in the same folder as the html file:

\<img src="yourImage.png" alt="Your Image" style="width:100px;height:100px"\>

Gerard_J · January 23, 2015, 3:22am

Thank you.

But, I can’t get it to work, that’s what I’ve been trying all along and I just checked everything was correct and it seems to be, but I still get the alternative text or the question mark.

The lines in which I create the webview is this:

helpView = native.newWebView( centerX, centerY, 700, 900 ) helpView.canGoBack=true helpView.hasBackground=false helpView:request("help"..settingsSave.language..".html", system.ResourceDirectory )

The html file is “help1.html” (and it opens correctly, except for the images)

The line with the image is:

\<img src="instructions1.png" alt="instructions" style="width:100px;height:100px"\>

“instructions1.png” and “help1.html” are both in the root folder of the project (the one containing “main.lua”) all in lower case.

Is this something that you’ve done before? perhaps it broke in a recent build.

Gerard_J · January 27, 2015, 6:20pm

So, anybody knows a way to get this to work? Is there some little detail I’m missing?

As alast resort I would store the images on the web, they are rather small so it wouldn’t affect much the data usage of the device. However, I think that from the users’ point of view it would seem ridiculous not to be able to read properly the instructions while offline, being this a game that doesn’t really require internet access to be played.

Or I could try to use a scrollview (In which I don’t remember being able to show a scrollbar) and manually adjust the image positions and spaces between paragraphs (\n\n\n) nuntil they look not too bad. The only problem is that in different anguages the paragraphs are likely to not be the same height, so the images may end up over the text.

James_Sherburne · January 23, 2015, 1:48am