Writerside
 
Get Writerside

Images

Last modified: 05 September 2024

Visualizing content with screenshots, animations, and diagrams can help your readers better understand instructions and concepts.

To add an image, use the <img> element or the standard Markdown notation for images: ![]().

If the image is in the designated images directory, reference the image by its name:

<img src="image.png" alt="Alt text" width="450"/>

To insert an image relative to the current topic, use a relative path:

If the image and topic file are in the same directory:
<img src="./image.png" alt="Alt text" width="450"/>

If the image is in some other location:
<img src="../myMediaDir/image.png" alt="Alt text" width="450"/>

Or relative to the project root:
<img src="$PROJECT_DIR$/allImages/image.png" alt="Alt text" width="450"/>

To insert an image hosted somewhere on the web, specify a URL to the image file:

<img src="https://www.jetbrains.com/company/brand/img/jetbrains_logo.png" alt="Alt text"/>