添加块图像

在此页面上，您将学习：

Asciidoc 块图像宏的结构。
如何使用其资源ID插入块图像。

Asciidoc 块图像宏

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

当 Antora 运行时，块图像宏引用的图像文件被嵌入并显示为发布页面中的离散元素。例如，该段下面的 SVG 图像使用块图像宏嵌入到该页中。

块图像宏观结构

例1显示了块图像宏的结构。

Example 1. Example 1. Block image macro

This is a paragraph.

image::resource-id-of-target-image.ext[optional attribute,optional attribute] (1)

This is another paragraph.

1	块图像由宏名称后的两个冒号( `::` )指定。它的前面是一个空行，它自己在一行中输入，然后后跟一个空行。

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

下面更详细地描述示例1中显示的块图像宏的每个部分。

image::: 块图像宏以宏的名称 image 开头，后面跟着两个冒号( :: )。
resource ID of target image: 图像宏接受图像源文件的资源ID作为其值。该值直接在跟随宏名称（ image:: ）的第二个冒号之后输入。需要指定目标图像的资源ID坐标取决于目标图像相对于当前页面的组件版本和模块。当从图像宏引用图像时，您无需在目标图像的资源ID中包含 image$ 族坐标。它会在运行时自动应用。
[optional attribute,optional attribute]: 块图像宏在目标图像的资源ID的末尾用一组方括号( [] )完成。可以将括号保留为空，也可以将一个或多个可选属性分配为方括号内的逗号分隔列表。

下一节嵌入块图像将逐步解释如何设置块图像宏。

嵌入块图像

让我们分解块图像宏和使用块图像宏将图像(目标图像)插入页面(当前页面)所需的资源ID坐标。

在您的 IDE 或文本编辑器中打开要插入图像的页面。在此练习中，我们打开了文件 satellites.adoc 。 satellites.adoc 是当前页面。
在 satellites.adoc 中，让我们嵌入块状图像 console.svg 。
在新行开头，输入宏的名称，后面跟着两个冒号 image:: 。确保在前面的元素(例如段落或源块)和放置图像宏的行之间有一个空白行。
Example 2. Example 2. satellites.adoc (current page)
```
After scanning your badge, you should see this screen.

image::
```
在两个冒号后直接输入目标图像文件的资源ID。在这个例子中，console.svg 和 satellites.adoc 属于同一个组件版本和模块，并且目标图像存储在 images 族目录的根目录中。因此，只需要将 console.svg 的文件名和扩展名分配为块状图像宏的值。
Example 3. Example 3. satellites.adoc (current page)
```
After scanning your badge, you should see this screen.

image::console.svg
```
注意，console.svg 的资源ID不包括它的族坐标。Antora 自动将 image$ 族坐标应用于分配给图像宏的资源 ID 。
在目标图像的资源ID后面，直接输入一个左方括号([)，然后输入一个右方括号(])。
Example 4. Example 4. satellites.adoc (current page)
```
After scanning your badge, you should see this screen.

image::console.svg[]
```
在这个例子中，我们没有对块图像宏应用任何可选属性;但是，您可以将一个或多个属性指定为方括号内的逗号分隔列表。
在最后一个方括号(])后按 kbd:[Enter]两次，以在图像宏后插入新行。
Example 5. Example 5. satellites.adoc (current page)
```
After scanning your badge, you should see this screen.

image::console.svg[]

Enter the satellite position after the prompt.
```

就是这样!您已经使用 AsciiDoc 块图像宏完成了将目标图像( console.svg )插入当前页面( satellites.adoc )的工作。

了解更多

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