Refer: markdown - Wrong path with images on Hugo page - Stack Overflow

Question

Wrong path with images on Hugo page

I’m trying to make a page on hugo with images, using markdown, but when i work on local i use

![Image1](images/Image1.png)

and the path on the web is something like https://myweb/path/page-name/images/Image1.png

so the path in the web didn’t work, i need to change the path to:

![Image1](../images/Image1.png)

In summary, I can not see the images on the web and local at the same time, could something be done to see them on both sites?

Solution

Let’s say you have project structure like this, where one image is in a page bundle, and the other image is in the static dir.

├── content
│   └── path
│       └── page-name
│           ├── images
│           │   └── Image1.png
│           └── index.md
├── static
│   └── images
│       └── Image1.png

Then in content/path/page-name/index.md, here is how you would refer to each image, by absolute path.

<!-- page bundle image -->
![Image1](/path/page-name/images/Image1.png)

<!-- static image -->
![Image1](/images/Image1.png)

Keep in mind that the page bundle image path will depend on how your permalinks are configured.