共用方式為


如何載入檔案資源 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]

了解如何從各個位置載入檔案資源。

您可以存取應用程式檔案中的檔案資源,應用程式檔案可以是隨應用程式套件傳送、隨附於元件或架構套件,或來自應用程式資料或網路的檔案。您可以在標記 (例如 HTML 或通知 XML) 或透過程式碼 (例如 Windows.Web.Httpstorage file) 參照這些檔案。這裡的範例顯示特定內容中的檔案資源,但您可以在其他各種內容中使用大多數的檔案資源。

網路

若要從網路存取檔案,您可以使用標準的絕對 HTTP URI。

<img src="https://www.contoso.com/images/logo.png" alt="Logo" />

應用程式套件

若要從應用程式套件存取檔案,您可以使用直接或邏輯檔案路徑參照資源。即使這些檔案的檔案名稱中以多種語言、縮放比例、對比或其他變數做為限定詞,都是如此。請參閱快速入門:使用檔案或影像資源,了解相關介紹。

例如,您要載入

Images/en-US/homeregion-USA/logo.scale-100_contrast-white.png

方法是參考

Images/logo.png

若要存取相對於標記中之目前文件的檔案,您可以使用相對 URI。

<img src="images/logo.png" />

若要存取相對於套件根目錄的檔案,您可以使用絕對路徑 URI (開頭為 "/")。

<img src="/images/logo.png" />

若要存取儲存在相同套件內但是來自於類別程式庫的檔案,可以使用類別程式庫名稱:

<img src="/ClassLibraryName/images/logo.png" />

若要存取儲存在應用程式套件內的檔案,但卻無法從程式碼推斷出基底文件的根,請使用 ms-appx: 配置。

var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
   ...
});

若要存取儲存在應用程式隨附之架構或程式庫套件中的檔案,請使用絕對 URI (和 ms-appx: 配置)。

<script src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>

若要存取將載入網路區間的檔案,請使用 ms-appx-web: 配置。

<iframe src="ms-appx-web:///html/webcompartment.html"></iframe>

若要存取相同網頁或本機區間中的檔案做為目前文件,請不要指定配置。

<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

應用程式資料

若要存取儲存在應用程式資料的檔案,請使用 ms-appdata: 配置。 應用程式資料可以儲存在 local 資料夾、roaming 資料夾或 temp 資料夾。

若要存取儲存在 local 資料夾中的檔案:

<img src="ms-appdata:///local/images/logo.png" />

若要存取儲存在 roaming 資料夾中的檔案:

<img src="ms-appdata:///roaming/images/logo.png" />

若要存取儲存在 temp 資料夾中的檔案:

<img src="ms-appdata:///temp/images/logo.png" />

storage file APIs 可以用相同的方法存取應用程式套件內的檔案:

var uri = new Windows.Foundation.Uri('ms-appdata:///local/images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
   ...
});

事件和內容變更

必要時,您的應用程式要負責更新資源的顯示。

系統可能會在 Windows 市集應用程式執行時進行變更,例如使用者開啟高對比時。這樣會讓應用程式使用另一組不同的限定詞。各種系統變更會在 ResourceContext 物件上叫用事件。

在 JavaScript 中,接聽這些事件最簡單的方式是透過 addEventListener 方法:

WinJS.Resources.addEventListener('contextchanged', refresh, false);

影像元素不會在內容變更時自動更新,必須由應用程式取代影像。CSS 媒體查詢是一種替代方法,可立即更新 CSS 屬性 (例如 background-image)。

相關主題

如何載入字串資源

URI 配置

定義應用程式資源

應用程式資源與當地語系化