添加内联图片

在本页中，您将学到：

  • AsciiDoc内联图片宏的结构。

  • 如何使用资源ID插入内联图片。

AsciiDoc内联图片宏

AsciiDoc内联图片宏用于将图像的源文件嵌入到部分或页面中。内联图片宏接受PNG、JPG、SVG和GIF（静态和动画）图像文件的Antora资源ID作为值。

当Antora运行时，内联图片宏引用的图像文件将嵌入到另一个元素的流中，例如侧边栏块，并显示在发布的页面中。例如，这是一个SVG图像 蓝点，它是使用内联图片宏嵌入到本段落中的。

内联图片宏结构

示例1显示了内联图片宏的结构。

示例1. 内联图片宏 
这个句子包含一个内联图片：resource-id-of-target-image.ext[可选属性，可选属性] 图像。 (1)
1 内联图片被输入到内容流中。在宏名称后面有一个冒号（:）来指示。

至少，内联图片宏由宏的前缀（image:）、目标图像的资源ID和一组方括号（[]）组成。 目标图像是当前页面引用的图像源文件。目标图像通过将其资源ID分配给当前页面的内联或块图像宏来引用。 当前页面是包含引用目标图像的图像宏的页面源文件。

在下面更详细地描述了示例1中显示的内联图片宏的每个部分。

image:

内联图片宏以宏的名称image开头，后跟一个冒号（:）。

目标图像的资源ID

图像宏接受图像源文件的资源ID作为其值。该值直接输入在跟随宏名称后面的冒号（image:）之后。您需要指定目标图像的资源ID坐标的数量取决于目标图像与当前页面的组件版本和模块的关系。当从图像宏引用图像时，您不需要在目标图像的资源ID中包含image$系列坐标。它会在运行时自动应用。

[可选属性，可选属性]

内联图片宏以一组方括号（[]）结束。您可以将方括号留空，或在方括号内部作为逗号分隔列表指定一个或多个可选属性。

下一节，嵌入内联图片，解释了如何逐步设置内联图片宏。

嵌入内联图片

让我们分解内联图片宏和资源ID坐标，以便使用内联图片宏将图像（目标图像）插入到页面（当前页面）中。

  1. 在您的IDE或文本编辑器中，打开要插入图像的页面。在本练习中，我们打开了文件satellites.adoc。 satellites.adoc是当前页面。

  2. 在satellites.adoc中，让我们嵌入内联图片blue-dot.svg。选择要在当前页面的内容流中显示目标图像的位置。输入宏名称，后跟一个冒号（image:）。

    示例2. satellites.adoc（当前页面） 
    查找image:

  3. 在冒号后直接输入目标图像文件的资源ID。在此示例中，blue-dot.svg和satellites.adoc属于同一组件版本和模块，目标图像存储在images家族目录的根目录中。因此，只需要将blue-dot.svg的文件名和扩展名分配为内联图片宏的值。

    示例3. satellites.adoc（当前页面） 
    查找图像：blue-dot.svg

    请注意，blue-dot.svg的资源ID不包括其家族坐标。Antora会自动将image$家族坐标应用于分配给图像宏的资源ID。

  4. 在目标图像的资源ID后面直接输入一个开方括号（[），然后是一个闭方括号（]）。

    示例4. satellites.adoc（当前页面） 
    查找图像：blue-dot.svg[]

    在此示例中，我们没有向内联图片宏应用任何可选属性；但是，您可以在方括号内部指定一个或多个属性作为逗号分隔列表。

  5. 在最后一个方括号（]）后按一次SPACE键，以在宏后插入一个空格，然后继续输入您的内容。

    示例5. satellites.adoc（当前页面） 
    在控制台上查找图像：blue-dot.svg[]。

就是这样！您已经使用AsciiDoc内联图片宏将目标图像（blue-dot.svg）插入到当前页面（satellites.adoc）中。

了解更多

要了解如何嵌入属于其他模块、文档组件和版本的图像，请参阅图像资源ID示例。