图像资源ID示例

您可以将图像插入到站点中的任何页面中,无论目标图像文件属于哪个模块或组件版本。在本页面中,您将学习如何根据图像所属的版本、组件和模块与您要嵌入图像的页面之间的关系,为图像宏分配正确的资源ID坐标。

有关块图像宏和内联图像宏的概述以及如何逐步将它们添加到页面的说明,请参见:

如果您不熟悉Antora资源ID或其坐标,请参见:

无论本页上的示例使用哪种图像宏来演示概念,都适用于块图像宏内联图像宏

在模块内使用图像

大多数您使用图像宏引用的图像可能属于同一模块组件版本与当前页面相同。在这种情况下,AsciiDoc图像宏只需要将目标图像的资源ID的文件坐标分配为一个值。

目标图像是当前页面引用的图像源文件。目标图像通过将其资源ID分配给当前页面的内联或块图像宏来引用。 当前页面是包含引用目标图像的图像宏的页面源文件。

目标图像的文件坐标结构取决于目标图像是存储在images家族目录的根目录还是images目录的子目录中。

示例1. current-page.adoc
image:target-image-filename.ext[可选属性] (1)

image:path/to/target-image-filename.ext[可选属性] (2)

image:./target-image-filename.ext[可选属性] (3)
1 当目标图像存储在images目录的根目录时的文件坐标。
2 当目标图像存储在images目录的子目录中时的文件坐标。
3 当目标图像和当前页面存储在具有相同家族相对目录路径的子目录中时的文件坐标。这是一个高级用例。

以下部分提供了显示不同文件坐标结构的示例。

图像目录根目录处的文件坐标

当目标图像存储在images家族目录的根目录时,文件坐标是目标图像的文件名和文件扩展名。请记住,目标图像的文件坐标始终是从images家族目录的根目录计算的。

示例2. 当目标图像存储在图像目录根目录时的图像宏中的文件坐标
image::target-image-filename.ext[可选属性]

让我们以组件版本colorado 5.2的文件为例来说明本节中的示例。组件版本的源文件根据列在标准目录集中的列表分配给模块和家族,示例见示例3

示例3. 分配给colorado 5.2的目录和文件
📄 antora.yml (1)
📂 modules
  📂 la-garita (2)
    📂 images (3)
      📄 wilderness-map.jpg
    📂 pages (4)
      📄 ridge.adoc
1 将组件版本定义为colorado 5.2
2 定义名为la-garita的模块
3 将后续文件定义为图像
4 将后续文件定义为页面

使用上述属于la-garita模块的两个文件,如上面的示例3所示,让我们将wilderness-map.jpg图像插入到ridge.adoc页面中。这意味着源文件wilderness-map.jpg是目标图像,ridge.adoc是当前页面。

示例4显示了在ridge.adoc页面(当前页面)中引用wilderness-map.jpg图像(目标图像)的块图像宏。当目标图像和当前页面属于同一模块时,只需在图像宏中输入目标图像的资源ID的文件坐标。

示例4. ridge.adoc(当前页面)
The trailhead is north of town.

image::wilderness-map.jpg[]

示例4中,wilderness-map.jpg图像的文件坐标是wilderness-map.jpg。因为wilderness-map.jpg存储在images目录的根目录中,所以它的文件坐标仅由其文件名和文件扩展名组成。

如果目标图像存储在images目录的子目录中,则其文件坐标必须指定images-相对目录路径、文件名和文件扩展名。有关目标图像存储在子目录中时的文件坐标示例,请参见带有图像相对目录路径的文件坐标

带有图像相对目录路径的文件坐标

当目标图像存储在images目录的子目录中时,其文件坐标中需要包含images-相对目录路径。

示例5. 当目标图像存储在图像目录的子目录中时的图像宏中的文件坐标
image::path/to/target-image-filename.ext[可选属性]

让我们以示例6中显示的组件版本的页面为例来说明本节中的示例。

示例6. 分配给colorado 5.2的目录和文件
📄 antora.yml (1)
📂 modules
  📂 la-garita (2)
    📂 images (3)
      📂 aerial (4)
        📄 skyline.jpg
    📂 pages (5)
      📄 ridge.adoc
1 将组件版本定义为colorado 5.2
2 定义名为la-garita的模块
3 将后续文件定义为图像
4 images中包含图像源文件的子目录
5 将后续文件定义为页面

让我们从ridge.adoc中引用skyline.jpg。如您在示例6中所见,图像和页面属于la-garita模块。在示例7中,ridge.adoc页面(当前页面)中的图像宏引用skyline.jpg图像(目标图像)。

示例7. ridge.adoc(当前页面)
= La Garita Ridgeline

image::aerial/skyline.jpg[]

示例7所示,skyline.jpg的文件坐标为aerial/skyline.jpg。因为skyline.jpg存储在子目录aerial中,所以skyline.jpg的文件坐标由其images-相对目录路径、文件名和文件扩展名组成。

在特殊情况下,目标图像的images-相对目录路径和当前页面的pages-相对目录路径平行时,文件坐标的images-相对目录路径可以用相对路径标记./替换。

使用另一个模块中的图像

目标图像当前页面不属于同一模块时,您必须在图像宏中指定目标图像的模块坐标文件坐标

示例 8. 将模块和文件坐标分配给图像宏
image:module:target-image-filename.ext[可选属性] (1)

image:module:path/to/target-image-filename.ext[可选属性] (2)
1 当目标图像不属于当前页面所在的模块时,将图像宏分配给目标图像的模块坐标和文件坐标。当目标图像存储在images家族目录的根目录下时,目标图像的文件坐标是其文件名和文件扩展名。
2 如果目标图像存储在images目录的子目录中,则目标图像的文件坐标必须指定其images相对目录路径、文件名和文件扩展名。

让我们使用在示例 9中显示的组件版本中的文件作为本节示例的基础。

示例 9. 分配给colorado 5.2的目录和文件
📄 antora.yml (1)
📂 modules
  📂 la-garita (2)
    📂 images (3)
      📂 aerial (4)
        📄 skyline.jpg
    📂 pages (5)
      📄 ridge.adoc
      📄 willow-creek.adoc
  📂 ROOT (6)
    📂 images (7)
      📄 peak.svg
    📂 pages (8)
      📄 index.adoc
      📄 ranges.adoc
1 将组件版本定义为colorado 5.2
2 定义一个名为la-garita的模块
3 将后续文件定义为图像
4 images中包含图像源文件的子目录
5 将后续文件定义为页面
6 定义ROOT模块
7 将后续文件定义为图像
8 将后续文件定义为页面

colorado 5.2组件版本中,如上所示的示例 9,让我们将peak.svg图像插入到willow-creek.adoc页面中。这意味着源文件peak.svg是目标图像,willow-creek.adoc是当前页面。

willow-creek.adoc(当前页面)中的内联图像宏如示例 10所示,引用了图像文件peak.svg(目标图像)。目标图像的资源ID的模块和文件坐标被分配给图像宏。页面willow-creek.adoc属于la-garita模块。图像peak.svg属于ROOT模块。

示例 10. 将peak.svg(目标图像)插入到willow-creek.adoc(当前页面)
海拔是 image:ROOT:peak.svg[] 10,067 英尺(3,068 米)。

示例 10所示,目标图像的模块坐标为ROOT,文件坐标为peak.svg

示例 11中,让我们将skyline.jpg图像(目标图像)嵌入到ranges.adoc(当前页面)中。图像skyline.jpg属于la-garita模块,ranges.adoc属于ROOT模块。

示例 11. 将skyline.jpg(目标图像)插入到ranges.adoc(当前页面)
image::la-garita:aerial/skyline.jpg[]

示例 11所示,目标图像的模块坐标为la-garita,文件坐标为aerial/skyline.jpg,因为它存储在images家族目录的aerial子目录中。

使用另一个文档组件中的图像

当目标图像和当前页面属于不同的文档组件时,您必须在图像宏中至少指定目标图像的组件、模块和文件坐标,通常也会指定版本坐标。

示例 12. 为图像宏分配版本、组件、模块和文件坐标
image:version@component:module:target-image-filename.ext[可选属性] (1)

image:version@component:module:path/to/target-image-filename.ext[可选属性] (2)

image:component:module:file-coordinate-of-target-image.ext[可选属性] (3)
1 当目标图像和当前页面不属于同一组件版本时,将目标图像的版本、组件、模块和文件坐标分配给图像宏。当目标图像存储在 images 家族目录的根目录时,目标图像的文件坐标是其文件名和文件扩展名。
2 如果目标图像存储在 images 目录的子目录中,目标图像的文件坐标必须指定其 images 相对目录路径、文件名和文件扩展名。
3 如果未指定版本坐标,Antora 将在运行时使用目标图像所属组件的 最新版本 来完成资源 ID。此行为仅适用于目标图像和当前页面属于不同文档组件的情况。

让我们使用属于组件版本 colorado 5.2 (示例 13) 和 wyoming 1.0 (示例 14) 的文件作为本节示例的基础。

示例 13. 分配给 colorado 5.2 的目录和文件
📄 antora.yml (1)
📂 modules
  📂 ROOT (2)
    📂 images (3)
      📄 peak.svg
    📂 pages (4)
      📄 index.adoc
      📄 ranges.adoc
1 将组件版本定义为 colorado 5.2
2 定义 ROOT 模块
3 将后续文件定义为图像
4 将后续源文件定义为页面
示例 14. 分配给 wyoming 1.0 的目录和文件
📄 antora.yml (1)
📂 modules
  📂 sierra-madre (2)
    📂 images (3)
      📄 panorama.png
    📂 pages (4)
      📄 elevation.adoc
      📄 wilderness-areas.adoc
1 将组件版本定义为 wyoming 1.0
2 定义名为 sierra-madre 的模块
3 将后续文件定义为图像
4 将后续文件定义为页面

使用来自 示例 13示例 14 的文件,让我们将 panorama.png(目标图像)插入到 ranges.adoc(当前页面)中。图像 panorama.png 属于 wyoming 1.0sierra-madre 模块。在 示例 15 中,分配给图像宏的资源 ID 指定了目标图像的版本、组件、模块和文件坐标,因为目标图像属于 wyoming 1.0 组件版本,而当前页面属于 colorado 5.2

示例 15. 将 panorama.png(目标图像)作为块图像插入到 ranges.adoc(当前页面)
image::1.0@wyoming:sierra-madre:panorama.png[]

示例 15 所示,目标图像的版本坐标为 1.0,组件坐标为 wyoming,模块坐标为 sierra-madre,文件坐标为 panorama.png

现在,在 示例 16 中,让我们将 peak.svg(目标图像)插入到 wilderness-areas.adoc(当前页面)中。 peak.svg 图像属于组件版本 colorado 5.2wilderness-areas.adoc 页面属于组件版本 wyoming 1.0

示例 16. wilderness-areas.adoc(当前页面)
image:5.2@colorado::peak.svg[] Bridger Peak is in the Sierra Madre range.

请注意,在 示例 16 中,资源 ID 中似乎缺少模块坐标 ROOT。当在资源 ID 中指定组件坐标,并且目标图像属于 ROOT 模块时,模块坐标 ROOT 不必显式指定。但仍需输入紧随模块坐标之后的冒号(:)。您可以在文件坐标 peak.svg 之前直接看到这个 :。这种简写仅在指定组件坐标且目标图像的模块坐标为 ROOT 时有效。在其他所有需要模块坐标的情况下,必须指定模块的名称。

您可能已经注意到,在 示例 15示例 16 中都指定了版本坐标。如果不指定版本,Antora 将在运行时使用目标图像最新组件版本的版本坐标来完成目标图像的资源 ID。

使用最新版本的图像

此行为仅适用于目标图像和当前页面属于不同文档组件的情况!

如果资源ID中未指定版本,并且目标图像和当前页面属于不同的文档组件,Antora会在运行时使用目标图像组件的最新版本的版本坐标来完成资源ID。

让我们以colorado 5.2(前一节中的示例13)、wyoming 1.0(前一节中的示例14)和wyoming 1.5(下面的示例17)中的文件为本节示例的基础。

示例17. 分配给wyoming 1.5的目录和文件
📄 antora.yml (1)
📂 modules
  📂 sierra-madre
    📂 images
      📄 panorama.png
    📂 pages
      📄 elevation.adoc
      📄 wilderness-areas.adoc
1 将组件版本定义为wyoming 1.5

让我们从index.adoc(当前页面)引用panorama.png图像(目标图像)。index.adoc属于colorado 5.2组件版本。有两个名为panorama.png的文件属于wyoming组件,sierra-madre模块和images家族。一个panorama.png属于版本1.0,另一个panorama.png属于版本1.5

示例18展示了一个块图像宏引用panorama.png(目标图像)从index.adoc(当前页面)。请注意,目标图像的版本坐标未指定。

示例18. index.adoc(当前页面)
image::wyoming:sierra-madre:panorama.png[]

当Antora运行时,它将根据其版本排序规则最新版本标准确定wyoming 1.5wyoming组件的最新版本。因为在示例18中未指定版本坐标,Antora将使用最新wyoming组件的版本坐标1.5来完成分配给图像宏的资源ID。

仅当未指定版本坐标且目标图像和当前页面属于不同组件时,链接到最新版本的行为才适用。如果资源ID中未指定版本和组件坐标,Antora会假定目标图像属于与当前页面相同的组件版本,并使用当前页面的版本和组件坐标来完成目标图像的资源ID。

使用来自其组件另一个版本的图像

当前页面目标图像属于同一组件,但目标图像属于组件的不同版本时,您需要指定版本、模块(如果与当前页面的模块不同)和文件坐标。

示例 19. current-page.adoc
image:version@module:file-coordinate-of-target-image.ext[optional attribute] (1)

image:version@file-coordinate-of-target-image.ext[optional attribute] (2)
1 当目标图像不属于与当前页面相同版本和模块时,将为图像宏分配目标图像的版本、模块和文件坐标。
2 当目标图像不属于与当前页面相同版本时,将为图像宏分配目标图像的版本和文件坐标。

让我们以本节示例的基础使用属于组件版本 colorado 5.2示例 20)和组件版本 colorado 6.0示例 21)的文件。

示例 20. 分配给 colorado 5.2 的目录和文件
📄 antora.yml (1)
📂 modules
  📂 la-garita
    📂 images
      📄 wilderness-map.jpg
    📂 pages
      📄 index.adoc
      ...
1 将组件版本定义为 colorado 5.2
示例 21. 分配给 colorado 6.0 的目录和文件
📄 antora.yml (1)
📂 modules
  📂 la-garita
    📂 pages
      📄 index.adoc
      📄 ridge.adoc
      📄 willow-creek.adoc
1 将组件版本定义为 colorado 6.0

请注意,示例 20 中的 colorado 5.2 组件版本具有图像 wilderness-map.jpg。然而,示例 21 中的 colorado 6.0 没有这样的图像文件。

让我们引用属于 colorado 5.2 的图像 wilderness-map.jpg(目标图像),从属于 colorado 6.0 组件版本的 ridge.adoc 页面(当前页面)。这两个资源都属于 la-garita 模块。在 示例 22 中,图像 wilderness-map.jpg(目标图像)嵌入在页面 ridge.adoc(当前页面)中。

示例 22. colorado 6.0 中的 ridge.adoc(当前页面)
image::5.2@wilderness-map.jpg[]

示例 22所示,目标图像的版本坐标为 5.2,文件坐标为 wilderness-map.jpg