u-blox

Images and Figures

1. Inline images

To add an image, add an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses. You can optionally add a title in quotation marks after the path or URL.

Example 1

Markdown:

![Drone](images/drone_1536x1152.jpg)

Rendered Output:

Drone

Example 2

Markdown:

![Mobility](images/Internal-mobility.png "Mobility")

Rendered Output: Mobility

Images can also be added by using a html image tag Markdown:

<img src="images/drone_1536x1152.jpg" alt="Drone" />

Rendered Output: Drone

Like links, Images also have a footnote style syntax

![Alt text][id]

With a reference later in the document defining the URL location:

[id]: images/organization.jpg  "Organization"

Rendered Output: ![Alt text][id] [id]: images/organization.jpg “Organization”

2. Base64 encoded Image

Instead of an url you can also add a base64 encoded image.

Markdown:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...g==" alt="Update notification">

Rendered Output: Update notification

Markdown:

![Hello World](data:image/png;base64,iVBORw0KGgoAAAANSUh...g==)

Rendered Output: Hello World

Markdown:

![GPIO pin](data:image/svg+xml;base64...)

Rendered Output: GPIO pin

3. GIFs

Markdown:

![gif test](images/dev-map-display-radius.gif)

gif test

4. Figures (images with captions)

Markdown:

```{figure} images/organization.jpg
:scale: 50 %
:alt: map to buried treasure

This is the caption of the figure (a simple paragraph).

The legend consists of all elements after the caption.  In this
case, the legend consists of this paragraph and the following
table:

| Symbol | Meaning |
| ------ | ------- |
| test | description   |

```

Rendered Output:

map to buried treasure

This is the caption of the figure (a simple paragraph).

The legend consists of all elements after the caption. In this case, the legend consists of this paragraph and the following table:

Symbol

Meaning

test

description