CODEWITHSUNDEEP
androidwebviewappcelerator-mobiletitanium-mobile
Finglish
Finglish

Reputation: 9966

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

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.

Upvotes: 4

Views: 7516

Answers (3)

Steve
Steve

Reputation: 21

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

Upvotes: 2

Markive
Markive

Reputation: 2400

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!

Upvotes: 0

Finglish
Finglish

Reputation: 9966

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.

Upvotes: 0

Related Questions