How to load file resources (HTML)
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 SDK or framework package, or from application state, or from the web. You can reference these files in markup (such as HTML, or Notifications XML), or via code (such as XmlHttpRequest 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.
To access files from the web, you can use a standard absolute HTTP URIs.
<img src="http://www.contoso.com/images/logo.png" alt="Logo" />
To access files from your application 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. See Quickstart: Using file or image resources for an introduction.
For example, you load
by referring to
To access files relative to the current document, 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 application package, but from code where there is no base document URI, specify the ms-appx: scheme.
var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png'); var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);
To access files stored in a framework package, use an absolute URI.
To access files that will be loaded into the web compartment use the ms-appx-web: scheme.
To access files in the same web or local compartment as the current document, do not specify a scheme.
To access files stored in the application state, use the ms-appdata: scheme. Application state may 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'); var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);
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.
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.