In appcelerator/titanium mobile, when using local html in a webview, how do I load an image from, and reference, the application data directory

Question

In a local html file, that is displayed in a webview, I want to be able to call an image from the application data directory. I have tried several src options in my html, but none seem to work.

I am loading the html file from the application data directory successfully like this:

var win = Ti.UI.currentWindow;

var rootDir = Ti.Filesystem.getExternalStorageDirectory();
var webUrl = rootDir + 'index.html';

var webview =  Ti.UI.createWebView({
width:'100%',
height:'100%',
url:webUrl
});

win.add(presWebView)

Although the page opens in the webview correctly, all the image urls are not functional.

<image src="appdata:///image.jpg"/>
<image src="app:///image.jpg"/>
<image src="file:///image.jpg"/>
<image src="appdata://image.jpg"/>
<image src="app://image.jpg"/>
<image src="app://image.jpg"/>

this problem also extends to links, no matter how I try to reference them the webview tells me the page does not exit.

score 2 · Answer 1 · edited Oct 26 '12 at 19:00

2

I've solved it.

You must obtain ApplicationDataDirectory o ExternalStorageDirectory, then with .nativePath property (of the file object) you can obtain your relative path dynamically.

var file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory(), 'test/1.html'); enter 

mywebview = Ti.UI.createWebView({ backgroundColor: 'white', url: file.nativePath });

edited Oct 26 '12 at 19:00

gnat

6,213
108
53
73

answered Apr 24 '12 at 12:46

Steve

21
2

score 0 · Answer 2 · answered Dec 08 '11 at 18:01

I have managed a partical solution which gets both the images and the links working correctly in my local html file by changing the webview url from an address based on its relative position to the externalstorage directory, to an absolute path:

var webUrl = "file:///mnt/sdcard/..."

var webview =  Ti.UI.createWebView({
width:'100%',
height:'100%',
url:webUrl
});

win.add(presWebView);

As long as the url is an absolute path all the links in the html can be relative e.g.

Obviously it would be preferable to get the external storage directory dynamically, so if anyone knows a way to do this without breaking the links in the html I would be keen to hear.

score 0 · Answer 3 · answered Feb 22 '12 at 17:36

In your Android directory /tools, there is a little program called DDMS. If you open that up, click on your emulator then in the top menu, click File Manager you can see all the paths that

"file://"

Can access..

So for example:

var imgPath = "file://mnt/sdcard/uk.co.yourappid/test.jpg";

I have just got this working in a WebView now:

Ti.App.addEventListener('snagr:plan:loadImage', function(e) {
            $('#plan-image').css({
                background: "url(" + e.path + ") top left no-repeat",
                width: e.width,
                height: e.height
            });
        });

Hope this helps!

In appcelerator/titanium mobile, when using local html in a webview, how do I load an image from, and reference, the application data directory

3 Answers3