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?

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/