Files in webview will not load on Windows Phone

Question

I've developed a hybrid web app and am using Appcelerator/Titanium SDK to convert it to native mobile applications. The codebase is working fine in both iOS and Android. However when I build to Windows and run it on a Windows Phone 8.1 Emulator it does not work.

I have debugged the issue and have figured out it is related to not loading images and javascript files referenced in the main index.html file (this is the local file I am loading into the WebView). However, I cannot figure out how to resolve the issue. Do I need to reference the files differently for Windows?

Edit: A basic test case... create a simple app with no additional plugins or modules.

test/Resources/app.js

var win = Ti.UI.createWindow({
    title: 'Testing'
  }),
  webview = Ti.UI.createWebView({
    url: 'app/index.html',
    top: 0,
    left: 0
  });

win.add(webview);
win.open();

test/Resources/app/index.html

<html>
<body>
    <h1>Hello World!</h1>
    <img src="test.png" />
</body>
</html>

Drop in any image into test/Resources/app/test.png.

On Windows Phone build, you will see the Hello World heading but the image will not load. On iOS and Android builds, everything works as expected (eg. the image loads just fine). This is with Titanium SDK 5.3.1.GA, and appcelerator CLI 5.3.1.

Yes my apologies I should have done that in the first place. I have edited my question to include a simple test case. — Todd Miller
First off, why aren't you using Alloy? it's much more recommended (and easy to maintain) than classic (btw - all Alloy project transpiled to classic anyways). I found this: stackoverflow.com/questions/27167512/… Try adding ms-appx-web:/// in your image src (this of course won't work on iOS and Android - but I would start by checking if it does the trick and take it from there) — developer82

Todd Miller Todd Miller · Accepted Answer · 2016-08-10T15:21:51

You can prefix images with ms-appx-web:/// and then provide the relative path from the Resources directory. So in this case the correct img tag would be

ms-appx-web:///app/test.png

However, this does not compute in iOS and Android, so you need to come up with a solution for using different image paths for Windows and iOS/Android.

Files in webview will not load on Windows Phone

1 Answers