How to load file resources (HTML)
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
Learn to load file resources from various locations.
You can access file resources in app files that you deliver as part of the app package, or that you include as part of a component or framework package, or from app data, or from the web. You can reference these files in markup (such as HTML, or Notifications XML), or via code (such as Windows.Web.Http or storage file APIs). The examples here show the file resources in specific contexts, but you can use most of them in various other contexts.
Web
To access files from the web, you can use a standard absolute HTTP URIs.
<img src="https://www.contoso.com/images/logo.png" alt="Logo" />
App package
To access files from your app package, you can use either a direct or a logical file path to refer to the resource. This is true even if the files have multiple language, scale, contrast, or other variations as qualifiers in the file name. See Quickstart: Using file or image resources for an introduction.
For example, you load
Images/en-US/homeregion-USA/logo.scale-100_contrast-white.png
by referring to
Images/logo.png
To access files relative to the current document in markup, you can use a relative URIs.
<img src="images/logo.png" />
To access files relative to the root of the package, you can use an absolute path URIs (those that begin with a "/").
<img src="/images/logo.png" />
To access files stored inside the same package, but from a class library, use the class library name:
<img src="/ClassLibraryName/images/logo.png" />
To access files stored inside the app package, but from code where there is no root inferred from the base document, use the ms-appx: scheme.
var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
...
});
To access files stored in a framework or library package that's included with the app, use an absolute URI (and ms-appx: scheme) .
<script src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
To access files that will be loaded into the web compartment use the ms-appx-web: scheme.
<iframe src="ms-appx-web:///html/webcompartment.html"></iframe>
To access files in the same web or local compartment as the current document, do not specify a scheme.
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
App data
To access files stored in the app data, use the ms-appdata: scheme. App data can be stored in a local folder, a roaming folder, or a temp folder.
To access files stored in the local folder:
<img src="ms-appdata:///local/images/logo.png" />
To access files stored in the roaming folder:
<img src="ms-appdata:///roaming/images/logo.png" />
To access files stored in the temp folder:
<img src="ms-appdata:///temp/images/logo.png" />
The storage file APIs can access files inside the application package in the same manner:
var uri = new Windows.Foundation.Uri('ms-appdata:///local/images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
...
});
Events and context changes
Your app is responsible for updating the display of its resources when necessary.
Windows Store apps may be running when the system changes, such as when the user turns on high contrast. This results in the app using a different set of qualifiers. Various system changes will invoke events on the ResourceContext object.
In JavaScript, the simplest way to listen for these events is through the addEventListener method:
WinJS.Resources.addEventListener('contextchanged', refresh, false);
Image elements are not updated automatically when the context changes and it is up to the application to replace the images. CSS media queries are an alternative which will update CSS properties such as background-image immediately.