Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-26860

iOS: HTML assigned to WebView "html" property is unable to access app's local files as of 8.0.0.RC

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Critical
    • Resolution: Fixed
    • Affects Version/s: Release 8.0.0
    • Fix Version/s: Release 8.0.0
    • Component/s: iOS
    • Environment:

      Ti SDK 8.0.0.v20190130052111

    • Story Points:
      8
    • Sprint:
      2019 Sprint 5

      Description

      Summary:
      When loading an HTML string to a WebView via its "html" property, it is no longer able to access the app's local files under the "Resources" directory as of Titanium 8.0.0.RC.

      Steps to reproduce:

      1. Create a Classic "Default Project" app.
      2. Replace the "app.js" code with the below code.
      3. Build with Titanium 8.0.0 and run on iOS.
      4. Notice that an image failed to load within the web view.
      5. Build with Titanium 7.5.x and run on iOS.
      6. Notice that the image successfully loaded within the web view.

      var htmlText =
      		'<!DOCTYPE html>' +
      		'<html>' +
      		'	<head>' +
      		'		<meta name="viewport" content="width=device-width, initial-scale=1.0">' +
      		'	</head>' +
      		'	<body>' +
      		'		<p>Local Image File</p>' +
      		'		<img src="assets/images/tab1.png"/>' +
      //		'		<img src="app://Resources/images/tab1.png"/>' +
      		'	</body>' +
      		'</html>';
       
      var window = Ti.UI.createWindow();
      var webView = Ti.UI.createWebView({
      	html: htmlText,
      });
      window.add(webView);
      window.open();
      

      Note:
      Loading local resource files via app://Resources/ also fails to load on iOS in Titanium 8.0.0.RC, but worked in older versions. Note that this URL scheme is undocumented and is not supported on Android.

      Work-Around:
      On iOS, the WebView.setHtml() method supports a 2nd argument where you can provide a "baseURL" parameter. This parameter allows you to set the directory (or URL) that file paths should be relative to. So, the below will work-around the problem.

      var htmlText =
      		'<!DOCTYPE html>' +
      		'<html>' +
      		'	<head>' +
      		'		<meta name="viewport" content="width=device-width, initial-scale=1.0">' +
      		'	</head>' +
      		'	<body>' +
      		'		<p>Local Image File</p>' +
      		'		<img src="assets/images/tab1.png"/>' +
      //		'		<img src="app://Resources/images/tab1.png"/>' +
      		'	</body>' +
      		'</html>';
       
      var window = Ti.UI.createWindow();
      var webView = Ti.UI.createWebView({
      // Don't do this.
      //	html: htmlText,
      });
      // Do this. It will work-around the 8.0.0.RC bug.
      webView.setHtml(htmlText, {
      	baseURL: Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory).nativePath,
      });
      window.add(webView);
      window.open();
      



      Original Bug Report Below


      The upcoming change in 8.0 from UIWebView to WKWebView is major and because of my reliance on the WebView I wanted to start testing this. There is a ticket TIMOB-26095 that indicates the transition is complete and tested, but there are so many use cases that are not included in the sample tests provided that I have major concerns.

      For example, I cannot get local resources like images to be rendered inside the WebView.

      Test case:

      var win = Ti.UI.createWindow();
       
      var html = '<html><body><img src="app://Resources/images/logo.png" /></body></html>';
       
      var webview = Ti.UI.createWebView({
        html: html
      });
       
      win.add(webview);
      win.open();
      

      Works fine in SDK 7.5.1, but the image does not load in 8.0.
      Am I doing something wrong? Is there a low-level change that I should know about for this?

        Attachments

          Activity

            People

            • Assignee:
              vijaysingh Vijay Singh
              Reporter:
              mdelmarter Matthew Delmarter
              Reviewer:
              Jan Vennemann
              Tester:
              Samir Mohammed
            • Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-21062
                  Sync status:
                  PENDING
                  Last received:
                  Last sent:

                  Git Source Code