Images

Images included in AsciiDoc files are automatically added as an attachment to the corresponding Confluence page and inserted into the page using the Confluence image tag. Included image files are resolved relative to the location of the referencing AsciiDoc file.

image::../images/frisbee.png[]

Also a caption can be set on an image by using a block title. The title is rendered with a custom CSS class cp-image-title.

.A nice orange frisbee
image::../images/frisbee.png[]
A nice orange frisbee
Figure 1. A nice orange frisbee

Image Size

In addition, width and/or height can be specified explicitly and are respected when inserting the image into the Confluence page:

image::../images/frisbee.png[width=100, height=50]
image::../images/frisbee.png[height=75]

Inline Images

Inline images are supported as well:

This line has an inline image image:../images/frisbee.png[width=16, height=16].

This line has an inline image frisbee within a text block.

Remote Images

Remote (i.e., images with a URL target) block and inline images are also supported. These images will not be downloaded and attached to the Confluence page, instead direct link will be used for image rendering.

.GitHub mascot
image::https://asciidoctor.org/images/octocat.jpg[]
GitHub mascot
Figure 2. GitHub mascot

Links

All images (block and inline) can have an external link:

This image has a link image:../images/frisbee.png[width=16, height=16, link=https://en.wikipedia.org/wiki/Frisbee].

This image has a link frisbee.

Borders

Block images can have a border added.

image::../images/frisbee.png[border]

So can inline images:

This line has an inline image image:../images/frisbee.png[width=16, height=16, border].

This line has an inline image frisbee within a text block.

Related pages