Uploaded image for project: 'Appcelerator - INBOX'
  1. Appcelerator - INBOX
  2. AC-6568

iOS: WebView.setHtml with baseURL doesn't seem to work correctly

    Details

    • Type: Bug
    • Status: Open
    • Resolution: Unresolved
    • Affects Version/s: None
    • Component/s: Titanium SDK & CLI
    • Labels:
      None
    • Environment:

      Ti SDK 9.0.0.GA

      Description

      Summary

      I'm downloading some images from the internet and storing them in the Ti.Filesystem.applicationDataDirectory. Since WKWebView was introduced we can no longer access the application directory directly, but I thought we could work around this by setting the baseURL in the second parameter of WebView.setHTML.

      Step to reproduce

      1. Add the example code to a Titanium classic project
      2. Set the SDK to 9.0.3.GA
      3. Run the app on iOS and wait for the webview to load (black content)

      const window = Ti.UI.createWindow();
      const wv = Ti.UI.createWebView();
      window.add(wv);
       
      function getContentDir() {
        var dir = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'content/');
        if (!dir.exists()) {
          dir.createDirectory();
        }
        return dir;
      }
       
      function getImage() {
        const contentDir = getContentDir();
        return Ti.Filesystem.getFile(contentDir.nativePath, 'image.png');
      }
       
      function request() {
        return new Promise(function (resolve, reject) {
          const req = Ti.Network.createHTTPClient({
            onload: () => {
              resolve(req.responseData);
            },
            onerror: (error) => {
              reject(error);
            },
            timeout: 15000
          });
       
          req.open("GET", "https://www.appcelerator.com/wp-content/uploads/Axway_logo_horiz_clr_rev_rgb.png");
          req.send(null);
        });
      }
       
      function getWrappedHTML(bodyContent) {
        return `<!doctype html>
                <html>
                  <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
                  </head>
                  <body style="background-color: black;">
                    <div>${bodyContent}</div>
                  </body>
                </html>`;
      }
       
      function loadImage() {
        console.log(getContentDir().nativePath);
        // setHtml with baseURL
        wv.setHtml(getWrappedHTML(`<img src="image.png" />`), { baseURL : getContentDir().nativePath });
      }
       
      window.addEventListener('open', () => {
        const image = getImage();
       
        if (image.exists()) {
          loadImage(image);
        } else {
          request().then((response) => {
            image.write(response);
            loadImage(image);
          }).catch((error) => {
            console.log(error);
          });
        } 
      });
       
      window.open();
      

      Expected result

      The webview shows the axway logo on a black background.

      Actual result

      The webview shows a black background with a missing image.

        Attachments

          Activity

            People

            • Assignee:
              amukherjee Abir Mukherjee
              Reporter:
              teunklijn@telfort.nl Teun Klijn
            • Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:

                Git Integration