快速入门:使用文件或图像资源 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]

你可以向应用添加图像和其他文件资源,并从应用内引用这些文件。 如果按照以下命名文件资源并将其组织在文件夹中的说明操作,则通过在 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。有关详细信息,请参阅选择应用图像以及磁贴和 Toast 视觉资产

       

    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 约定。请参阅如何使用限定符命名资源,了解有关用于限定资源的文件夹名称约定和限定约定的详细信息。

相关主题

如何使用限定符命名资源

应用图像

按比例缩放像素密度指南

磁贴图像尺寸