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.

Answer 1

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 });