Three Ways to Embed Images in Hugo

· 1 min read · 56 words

Using Markdown Syntax

![Alt text](/img/jrqz/trails_in_the_sky_sc.jpg)
*Image caption*

Does not support resizing.

Alt text Image caption

Using HTML

<figure>
    <img src="/img/jrqz/trails_in_the_sky_sc.jpg" alt="Alt text" width="50%">
    <figcaption>Image caption</figcaption>
</figure>

Requires adding to hugo.toml:

[markup.goldmark.renderer]
unsafe = true
Alt text
Image caption

May pose security risks like code injection.

Using Hugo Shortcodes

{{< figure src="/img/jrqz/trails_in_the_sky_sc.jpg" caption="Image caption" >}}

Resizing requires custom CSS.

Image caption

Image caption