[TIMOB-27064] iOS: Unable to load image on imaveView from nativePath on physical device

GitHub Issue	n/a
Type	Bug
Priority	None
Status	Resolved
Resolution	Duplicate
Resolution Date	2019-08-01T00:38:16.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	iOS
Labels	n/a
Reporter	Fazlul Haque
Assignee	Vijay Singh
Created	2019-05-07T16:34:02.000+0000
Updated	2019-12-02T23:06:30.000+0000

Description

Hello, We are unable to load image on imaveView from nativePath on physical device but it's showing the image on lower version of SDK (7.5.2.GA) and Simulator (with latest version of SDK). *Test code:*

function DoTest() {

	//download image, then show it in a web view

	//create directory
	sDir = Ti.Filesystem.applicationDataDirectory + "/productimages/";
	d = Ti.Filesystem.getFile(sDir);
	if (!d.exists()) {
		d.createDirectory();
	}

	sImageName = "Fortune-Cookie-2748_large.png";
	sURL = "https://boomboom.cart32.com/productimages/" + sImageName;

	var xhr = Titanium.Network.createHTTPClient();
	xhr.onload = function() {
		f = Ti.Filesystem.getFile(sDir + sImageName);
		//write file
		Ti.API.info('Status = ' + xhr.status);
		if (xhr.status == 200) {
			Ti.API.info('SUCCESS - Size= ' + xhr.responseData.size + ' Downloaded image(' + sImageName + ') - Writing ' + f.nativePath);
			//write PNG file
			f.write(xhr.responseData);
			ShowImageInWebView(sDir + sImageName);
		}
	};

	xhr.onerror = function(e) {
		Ti.API.info('Error: ' + e.error);
	};

	Ti.API.info('Calling ' + sURL);
	xhr.open('GET', sURL);
	xhr.send();

}

function ShowImageInWebView(sImageFile) {

	var f = Ti.Filesystem.getFile(sImageFile);
	Ti.API.info('f.nativePath = ' + f.nativePath);

	sHTML = 'Image<br><img src="' + f.nativePath + '" />';

	var wv = Ti.UI.createWebView({});
	wv.html = sHTML;

	var win = Titanium.UI.createWindow({
		title : 'Test',
		modal : true,
		backgroundColor : '#ff0000'
	});
	win.add(wv);
	win.open();

}
DoTest();

*Test Results on device:*

[INFO] : Calling https://boomboom.cart32.com/productimages/Fortune-Cookie-2748_large.png
[INFO] : Status = 200
[INFO] : SUCCESS - Size= 390580 Downloaded image(Fortune-Cookie-2748_large.png) - Writing file:///var/mobile/Containers/Data/Application/061D8DA1-A61B-47C8-8279-F9571E19D402/Documents/productimages/Fortune-Cookie-2748_large.png
[INFO] : f.nativePath = file:///var/mobile/Containers/Data/Application/061D8DA1-A61B-47C8-8279-F9571E19D402/Documents/productimages/Fortune-Cookie-2748_large.png

*Test Environment:* Appcelerator Command-Line Interface, version 7.0.10 Operating System Name = Mac OS X Version = 10.14.4 Architecture = 64bit # CPUs = 4 Memory = 8589934592 Node.js Node.js Version = 8.9.1 npm Version = 5.5.1 Titanium CLI CLI Version = 5.1.1 Titanium SDK SDK Version = 8.0.0.GA Note: I have tried it with WKWebView for 8.0.0.GA but got the same results. Thanks

Attachments

File	Date	Size
ios-device-screenshot.jpg	2019-05-07T16:30:01.000+0000	93999
ios-simulator-screenshot.png	2019-05-07T16:30:02.000+0000	280371

Comments

Vijay Singh 2019-05-07

[~fhaque] Can you check TIMOB-26860? I think it's duplicate. Probably wv.setHtml(sHTML, { baseURL: Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory).nativePath }); will fix the problem. Thanks!

Vijay Singh 2019-05-17

It's bug due to WKWebView. It is similar to native issue as discussed [here](https://apple-dev.groups.io/g/cocoa/topic/wkwebview_does_not_load/6097137?p=,,,20,0,0,0::recentpostdate%2Fsticky,,,20,2,0,6097137). I'll check on this. But following workaround will work - 1.Use encoded image data while creating html instead image path.

    function DoTest() {
    
       //download image, then show it in a web view
    
       //create directory
       sDir = Ti.Filesystem.applicationDataDirectory + "/productimages/";
       d = Ti.Filesystem.getFile(sDir);
       if (!d.exists()) {
           d.createDirectory();
       }
    
       sImageName = "Fortune-Cookie-2748_large.png";
       sURL = "https://boomboom.cart32.com/productimages/" + sImageName;
    
       var xhr = Titanium.Network.createHTTPClient();
       xhr.onload = function() {
           f = Ti.Filesystem.getFile(sDir + sImageName);
           //write file
           Ti.API.info('Status = ' + xhr.status);
           if (xhr.status == 200) {
               Ti.API.info('SUCCESS - Size= ' + xhr.responseData.size + ' Downloaded image(' + sImageName + ') - Writing ' + f.nativePath);
               //write PNG file
               f.write(xhr.responseData);
               ShowImageInWebView(sDir + sImageName);
           }
       };
    
       xhr.onerror = function(e) {
           Ti.API.info('Error: ' + e.error);
       };
    
       Ti.API.info('Calling ' + sURL);
       xhr.open('GET', sURL);
       xhr.send();
    
   }
    
   function ShowImageInWebView(sImageFile) {
    
       var f = Ti.Filesystem.getFile(sImageFile);
       Ti.API.info('f.nativePath = ' + f.nativePath);
       
       // Add following 3 lines in your code
       var encodedData = Ti.Utils.base64encode(f);
       var imageForTheHtml = "data:application/png;base64," + encodedData;
        sHTML = 'Image<br><img src="' + imageForTheHtml + '" />';
   
      // sHTML = 'Image<br><img src="' + f.nativePath + '" />';
   
       var wv = Ti.UI.createWebView({});
       wv.html = sHTML;
    
       var win = Titanium.UI.createWindow({
           title : 'Test',
           modal : true,
           backgroundColor : '#ff0000'
       });
       win.add(wv);
       win.open();
   }
   DoTest();

2. If it is possible to give web url, it will also work -

      var sHTML = 'Image<br><img src="https://boomboom.cart32.com/productimages/Fortune-Cookie-2748_large.png" />';
   
       var wv = Ti.UI.createWebView({});
       wv.html = sHTML;
    
       var win = Titanium.UI.createWindow({
           title : 'Test',
           modal : true,
           backgroundColor : '#ff0000'
       });
       win.add(wv);
       win.open();

Vijay Singh 2019-08-01

This issue has been fixed in TIMOB-27159, which is planned for 8.2.0. Still a minor modification will require in test code. See following example-

   function DoTest() {
    
       //download image, then show it in a web view
    
       //create directory
       sDir = Ti.Filesystem.applicationDataDirectory + "/productimages/";
       d = Ti.Filesystem.getFile(sDir);
       if (!d.exists()) {
           d.createDirectory();
       }
    
       sImageName = "Fortune-Cookie-2748_large.png";
       sURL = "https://boomboom.cart32.com/productimages/" + sImageName;
    
       var xhr = Titanium.Network.createHTTPClient();
       xhr.onload = function() {
           f = Ti.Filesystem.getFile(sDir + sImageName);
           //write file
           Ti.API.info('Status = ' + xhr.status);
           if (xhr.status == 200) {
               Ti.API.info('SUCCESS - Size= ' + xhr.responseData.size + ' Downloaded image(' + sImageName + ') - Writing ' + f.nativePath);
               //write PNG file
               f.write(xhr.responseData);
               ShowImageInWebView(sDir + sImageName);
           }
       };
    
       xhr.onerror = function(e) {
           Ti.API.info('Error: ' + e.error);
       };
    
       Ti.API.info('Calling ' + sURL);
       xhr.open('GET', sURL);
       xhr.send();
    
   }
    
   function ShowImageInWebView(sImageFile) {
    
       var f = Ti.Filesystem.getFile(sImageFile);
       Ti.API.info('f.nativePath = ' + f.nativePath);
    
       sHTML = 'Image<br><img src="' + f.nativePath + '" />';
    
       //create directory for writing html
      var htmlDir = Ti.Filesystem.applicationDataDirectory + "/html/";
      var d = Ti.Filesystem.getFile(htmlDir);
       if (!d.exists()) {
           d.createDirectory();
       }
       var htmlFile = Ti.Filesystem.getFile(htmlDir + 'sHTML.html');
           htmlFile.write(sHTML);
   
       var appDataDir = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory);
   
    
       var wv = Ti.UI.createWebView({
           url: htmlFile.nativePath,
           assetsDirectory: appDataDir.nativePath
       });
    
    
       var win = Titanium.UI.createWindow({
           title : 'Test',
           modal : true,
           backgroundColor : '#ff0000'
       });
       win.add(wv);
       win.open();
    
   }
   DoTest();

JSON Source