Just add images like this:

In HUGO we typically have a blog post (.md file) in which we want to reference one or more images (e.g. jpg or png). Use a HUGO component called “shortcode” to integrate images into your posts!

Here is an example: In the m10c theme which I use, we have the following folder structure:

.
├── config.toml
├── content
│   └── posts
│       └── cool-post-with-image.md
└── themes
    └── m10c
        ├── assets
        │   └── images
        │       └── my-cool-picture.png 
        └── layouts
            └── shortcodes
                └── img.html

We want to render the image my-cool-picture.png in a blog post in the file named cool-post-with-image.md.

All we need to do is create a shortcode by adding a new file called “content/layouts/shortcodes/img.html” and paste in the following code:

{{ $image := resources.GetMatch (.Get "src") }}

<img src="{{ $image.RelPermalink }}">

Save it and the shortcode should be ready to use. From here, you should be able reference any image in your markdown files to be rendered on your website.

Staying in the example, we add the following snippet into our post content/posts/cool-post-with-image.md just somewhere in between the other content where ever it seems most suitable:

Some text...

{{< img src="images/my-cool-picture.png" alt="my cool picture">}}

... maybe more text.

Congrats! 🥳 You successfully created a shortcode and can now add images to your blog.

Disclaimer

I only tested this setup against this HUGO Theme from vaga. Not sure if it would work in the same way for other themes or if even a good choice to use shortcodes at all for adding images in other HUGO setups. Still hope that the way described above would help people in situations similar to mine not knowing a lot about HUGO with the quick need to add some images to a post. Therefore, also make sure to look into the references below that people with much deeper knowledge about HUGO have created!

References

At the time of opening this blog I was a complete HUGO-novice with rudimentary frontend skills. It took me a while to find out how to add images that would render nicely. Therefore, I decided to write this post to share the knowledge. Here is the list of all the relevant sources that lead there.