Image
To add an image use this. You should prefix local images with a slash. These will be loaded from your public directory. You can also use external images from other sources.

You can also add an alternate description for the image, which can be used by screen readers.

You can also add a visible caption to your image like so:

If you want to link your image you can use the normal link syntax:
[](/elements/hints)
If your Hyperbook uses the basePath property, the basePath will automatically be prepended.
Customize position and styling
You can customize the position and styling of your images by adding special characters before or after the image markdown.
Custom classes and attributes can be added by using curly braces {}
after the image markdown.
{#hero .rounded width="200"}
This will add an image with the ID hero
, the class rounded
and a width of 200px
.
This is best used with custom css styles.
You can also align your image to the left, right or center by adding special characters before or after the image markdown.
center: 
left: -
leftplus: --
right: -
rightplus: --
centerplus: ----
You can use the horizontal rule to stop text flowing around the image.
You can check all options on this example page.