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="http://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.

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.