How to insert an image in my post on Hugo?

Question

Here is my repository on my Hugo blog:

I'd like to insert an image to a post with the following text:

![Scenario 1: Across columns](content/post/image/across_column.png)

However, it does not come out and it gives an error of 404 - Page not found.

What am I making wrong here?

Merrell

Answer 1

You have a typo in the image link. You have an images directory, but reference "content/post/image/..." without the "s". That won't fix it for you though.

There are a few ways to link images.

Option 1. Put all of your images in the static/ directory. Then reference the image file with a leading slash, e.g.:

![Scenario 1: Across columns](/across_column.png)

Option 2. Use sub-directories to hold the markdown file and any related resources.

1. create a directory post/creating-a-new-theme
2. move your existing markdown file into that directory, and rename it to index.md
3. create a subdirectory post/creating-a-new-theme/images and move your images in there
4. reference the image as ![Image alt](images/my-image.jpg)

More info on option 2: https://github.com/gohugoio/hugo/issues/1240#issuecomment-753077529

More options

There are more sophisticated ways to reference images using the frontmatter, as well: https://gohugo.io/content-management/page-resources/

Commute

I stumbled across this answer in the hopes that there would be a better explanation of the more sophisticated options - because that documentation is somewhat lacking :( – Leak

Answer 2

TL;DR

Put your images in the static directory, just like below, use it in markdown like ![targets](/images/my_post_folder/my_image.png) or ![targets](/images/my_image2.jpg) if you don't want to build a post folder

---

If you search the hugo documentation, you can find Image Processing | Hugo

But! That's no a markdown way to insert an image. If you don't miss the Getting Stated, you will find the static Directory, which says can store images, that's it!

[static](https://gohugo.io/content-management/static-files/)

Stores all the static content: **images**, CSS, JavaScript, etc. When Hugo builds your site, all assets inside your static directory are copied over as-is. A good example of using the static folder is for verifying site ownership on Google Search Console, where you want Hugo to copy over a complete HTML file without modifying its content.

How to use it

Put your images in the static directory, just like below, use it in markdown like ![targets](/images/my_post_folder/my_image.png) or ![targets](/images/my_image2.jpg) if you don't want to build a post folder

static
└── images
    ├── my_post_folder
    │   ├── my_image.png
    └── my_image2.jpg

Debris

Answer 3

Images support is provided through Hugo Images Module. In my website I have for example in config.toml

[module]
  [[module.imports]]
    path = 'github.com/hugomods/images'
    disable = false

My images are stored in assets/docs/ so this becomes a global image resource that I can than add to a post or page with

![Resize](/images/docs/whatever.png?width=200px)

Had