It depends on the theme, the baseURL
, etc.
If I were starting from scratch, creating my own layouts/theme…
Images related to a single page should be placed in a page bundle:
content/
├── posts/
│ ├── post-1/
│ │ ├── c.jpg <-- page resource
│ │ ├── d.jpg <-- page resource
│ │ └── index.md
│ ├── post-2.md
│ └── _index.md
└── _index.md
Images that can be used anywhere on the site should be placed in the assets directory:
assets/
└── images/
├── a.jpg <-- global resource
└── b.jpg <-- global resource
And to make this setup work when adding images to your Markdown, enable Hugo’s embedded link and image render hooks in your site configuration:
[markup.goldmark.renderHooks.image]
enableDefault = true
[markup.goldmark.renderHooks.link]
enableDefault = true
The content/posts/post-1/index.md file would look something like this:
![a kitten](images/a.jpg)
![another kitten](c.jpg)
Note that Hugo’s embedded link and image render hooks are automatically enabled for multilingual single-host sites.