在appcelerator / titanium mobile中，当在Webview中使用本地html时，如何从应用程序数据目录加载图像并引用该图像

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

Answer 2

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 eg

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.

Answer 3

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!