Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Can't load images for local html file in WebView, is it possible?
Started by Gerard J. Jan 22 2015 02:50 PM

- - - - -
5 replies to this topic
webview html images
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

Gerard J.

[GLOBAL: userInfoPane.html]
Gerard J.
  • Observer

  • 20 posts
  • Corona SDK

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

 

<img src="img/instructions/instructions1.png">
<img src="/img/instructions/instructions1.png">
<img src="../img/instructions/instructions1.png">
<img src="instructions1.png">
<img src="/instructions1.png">
<img src="../instructions1.png">
<img src="instructions1.jpg">
<img src="/instructions1.jpg">
<img src="../instructions1.jpg">

 

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!



[TOPIC: post.html]
#2

James Sherburne

[GLOBAL: userInfoPane.html]
James Sherburne
  • Contributor

  • 150 posts
  • Corona SDK

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">


[TOPIC: post.html]
#3

Gerard J.

[GLOBAL: userInfoPane.html]
Gerard J.
  • Observer

  • 20 posts
  • Corona SDK

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.



[TOPIC: post.html]
#4

Gerard J.

[GLOBAL: userInfoPane.html]
Gerard J.
  • Observer

  • 20 posts
  • Corona SDK

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.



[TOPIC: post.html]
#5

susan7

[GLOBAL: userInfoPane.html]
susan7
  • Observer

  • 6 posts
  • Corona SDK

See
http://forums.coronalabs.com/topic/54284-local-html-content-not-working-on-android-device-using-nativenewwebview/

I was having this same issue today but I downloaded a newer build from the daily builds and it fixed the problem.



[TOPIC: post.html]
#6

tosters

[GLOBAL: userInfoPane.html]
tosters
  • Observer

  • 2 posts
  • Corona SDK

I had a problem even after the upgrade. The problem has been in the image.
On the one device that worked successfully. But on the other device "Alcatel ONE Toch" it was not working.
It replaces the image, and the problem was solved.



[topic_controls]
[/topic_controls]