Share via


快速入門:使用檔案或影像資源 (HTML)

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

您可以將影像和其他檔案資源新增到您的應用程式,並從應用程式內參考這些檔案。 如果您遵循以下關於在資料夾中命名和組織檔案資源的指示,Windows 執行階段中就會內建根據高對比設定或顯示器特定比例來支援選取影像的功能。

指示

  1. 為不同的顯示器組態 (DPI) 和對比設定建立量身打造的影像或其他檔案資產。

    以建議的數種大小建立您的影像,確保當 Windows 載入適當資源時,仍能保持很棒的外觀。請參閱調整成像素密度的指導方針

    1. 建立每個影像的多個複本:

      1. 一般 96dpi 裝置使用的原始大小。為這個檔案命名 name**.scale-100.ext (對此項及所有後續的指示而言,name 是您所選資源名稱的預留位置,ext 是檔案類型特定的副檔名。.scale-100** 是說明 Windows 執行階段縮放行為的資源名稱區段,這個名稱部分應使用我們在此記錄的慣例。)
      2. 原始大小的 140%。例如,100x100px 的影像也應該有 140x140px 的影像版本。將這個檔案命名為 name**.scale-140.**ext
      3. 原始大小的 180%。例如,100x100px 的影像也應該有 180x180px 的影像版本。將這個檔案命名為 name**.scale-180.**ext
      4. 原始大小的 240% (適用於 Windows Phone 應用程式)。例如,100x100px 的影像也應該有 240x240px 的影像版本。將這個檔案命名為 name**.scale-240.**ext
      5. 原始大小、具有黑色背景和白色前景的高對比影像。將這個檔案命名為 name**scale-100_contrast-black.**ext
      6. 原始大小、具有白色背景和黑色前景的高對比影像。 將這個檔案命名為 name**scale-100_contrast-white.**ext

      注意  應用程式標誌影像也會使用在應用程式資訊清單檔案中指定的資源。如果您特別針對應用程式標誌使用影像,您應建立一個大小是原始大小 80% 的複本。例如,100x100px 的標誌影像也應該有 80x80px 的影像版本。將這個檔案命名為 name**.scale-80.**ext。如需詳細資訊,請參閱選擇您的應用程式影像磚與快顯通知視覺資產

       

    2. 將所有影像放在您的應用程式結構的同一資料夾中。例如:

      1. images/logo.scale-100.png
      2. images/logo.scale-140.png
      3. images/logo.scale-180.png
      4. images/logo.scale-240.png
      5. images/logo.scale-80.png
      6. images/logo.scale-100_contrast-black.png
      7. images/logo.scale-100_contrast-white.png
  2. 參考 HTML 中的影像,不使用限定詞

    當您從標記參考這個檔案資源時,請使用表單 name.ext (您刻意省略指定縮放比例和對比的區段;當 Windows 執行階段擷取適當的資源時,會在內部附加這個區段。)例如:

    <img src="images/logo.png" />
    
  3. 參考程式碼中的影像,不使用限定詞

    當您從程式碼參考這個檔案資源時,請使用表單 name.ext (您刻意省略指定縮放比例和對比的區段;當 Windows 執行階段擷取適當的資源時,會在內部附加這個區段。)上述標記指示的差異在於,由於標記檔案的內容,標記可以推斷出配置和根。但程式碼則無法推斷配置和根;當您建構新的 Uri 時,程式碼需要統一資源識別項 (URI) 的配置和根部分。例如:

    var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');
    var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);
    
  4. 對於標誌檔案,請參考資訊清單中的影像,不使用限定詞

    1. 在 Microsoft Visual Studio 中開啟 Package.appxmanifest 檔案。開啟 [視覺資產] 索引標籤。

    2. 編輯資訊清單參考以參考資源檔案。根據預設,這會顯示為文字編輯欄位,當您在此處指定資源檔案名稱時,請省略限定詞區段。例如,有一個 [正方形 150x150 標誌]**** 欄位,其中的值可能是:

      images\logo.png
      

檔案資源和全球化

本主題的說明重點在可啟用縮放比例和對比支援的資源限定詞。這些使用在檔案名稱內包含限定詞的慣例。但由於縮放比例或對比支援以外的原因,有些影像或其他檔案可能需要當地語系化,特別是它們包含文字或與文化特性相關的資料時。視使用者的位置而定,檔案可能會有差異,但與他們的語言無關。例如,根據使用者的位置,地圖可能會有不同的邊界,但是標籤應該遵循使用者的慣用語言。如需為什麼必須這樣做的詳細資訊,請參閱全球化與當地語系化的指導方針

如果您需要每種語言和位置有不同的資源,Windows 執行階段也支援可在執行階段決定語言和位置並載入不同之適當資源的慣例。這個慣例使用資料夾名稱,而非檔案名稱。因此,您可以將此處描述的檔案名稱慣例與資料夾慣例合併,以定義支援縮放比例/對比和當地語系化考量的資源。另外也支援 RTL 特定的資源,以及特殊狀況 (例如系統顯示的檔案關聯影像) 使用的 targetsize 慣例。如需合格資源之資料夾名稱慣例和合格慣例的詳細資訊,請參閱如何使用限定詞命名資源

相關主題

如何使用限定詞命名資源

應用程式影像

調整成像素密度的指導方針

磚影像大小