In appcelerator / titanium mobile, when using local html in webview, how can I upload an image and a link to the application data directory

Question

In the local html file that is displayed in the web view, I want to be able to call the image from the application data directory. I tried several src options in my html but nobody works.

I load the html file from the application data directory 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 correctly in the web view, all image URLs do not work.

 <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 applies to links, no matter how I try to link to them, web browsing tells me that the page does not exit.

Answer 1

I solved it.

If you need to get ApplicationDataDirectory o ExternalStorageDirectory, then with the property .nativePath (file object) you can get 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 was able to solve a partial solution in which both images and links work correctly in my local html file by changing the webview URL at the address based on its relative position to the externalstorage directory, to the 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 links in html can be relative, for example.

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

Answer 3

Your Android directory / tools have a small program called DDMS. If you open this, click on your emulator, then in the top menu, click "File Manager", you will see all the paths that

 "file://" 

Access to..

So for example:

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

I just got this working in 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!