Titanium Community Questions & Answer Archive

Question

Using images in Inline HTML for a webview (bis)

Hello,

Sorry for opening a potential "duplicate" Q&A but my original question got closed, while the issue is still open. Original post was: http://developer.appcelerator.com/question/11431/using-images-in-inline-html-for-a-webview

I am trying to use images (thru <img> html tag) on inline html to be displayed thru a webview. I can't figure out the proper way path to access the image, I think I have tried all possible combinations and the image always fails to display on the rendered webview. Any ideas ?
I'm using Titanium Mobile SDK 1.2.1 for Android, APIs 2.1.

Chris Reed already answered that using this format should work: <img src="app://images/logo.png" alt="logo">
There are similar posts in other Q&A but only Iphone is mentioned, anyone got this working on Android, any other solution ?

Thank you, JS

Answer 1

I've found that there is one way that works on Android and one on iOS and none that works on both (this was tested on devices & simulators/emulators of both types). I'm currently on Titanium SDK 1.7.0 nightly:

var imgSrc;
if( Wikia.Platform.is('ios') ){
   imgSrc = "images/phone.gif";
} else {
   imgSrc = Ti.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory, "images/phone.gif").nativePath;
}

btw… platform detection code is like this:

Wikia.Platform.is = function(platformName){
        return ((platformName === platform) || (platformName === 'ios' && (platform in iOSDevices)));
    };

Answer 2

I have the same problem, i have tried all logical combinations and i no see images in inline html (in android all api's titanium 1.2 and 1.3)

var webview = Ti.UI.createWebView({
    html:'<html><body><img src="path-to-image/image.png"></body></html>',
    backgroundColor:'#fff'
});
win.add(webview);

But if i put a local html, this work.

var webview = Ti.UI.createWebView({
    html:page.html,
    backgroundColor:'#fff'
});
win.add(webview);

page.html

<html>
<body>
<img src="path-to-image/image.png">
</body>
</html>

Why? Someone can help us? Thanks all!

Answer 3

donno how is for android, but for iphone I have all the images in the resources folder and it works out of the box without app://, and the path is relative to the location of the html file

about.html , and image.png are in resources/extra/
and in about.html I have

<img src="image.png" />

and it works

Answer 4

In my case I did not get anything to work, using regular path like
<img src="image.png" /> or app:// path like <img src="app://images/logo.png" alt="logo">

I have tried many combinations without any results, I suspect the problem is only related to Appcelerator on Android, but I would like to get confirmation from other users.

Thank you,

Answer 5

In my case I did not get anything to work, using regular path like
<img src="image.png" /> or app:// path like <img src="app://images/logo.png" alt="logo">

I have tried many combinations without any results, I suspect the problem is only related to Appcelerator on Android, but I would like to get confirmation from other users.

Thank you,

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Using images in Inline HTML for a webview (bis)

5 Answers