0

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.

Todd Miller
  • 301
  • 1
  • 6
  • Can you share some code of an image that's not loaded? – developer82 Aug 10 '16 at 06:47
  • 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 Aug 10 '16 at 13:39
  • Are you using Alloy or classic app? – developer82 Aug 10 '16 at 13:45
  • Just a classic app. – Todd Miller Aug 10 '16 at 13:47
  • 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: http://stackoverflow.com/questions/27167512/use-local-image-to-display-in-webview-for-windows-phone-8-1 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 Aug 10 '16 at 15:01

1 Answers1

0

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.

Todd Miller
  • 301
  • 1
  • 6