How to add image to hugo with local and remote

support
1

I want add an image to hugo’s md file. And I want see it on local and website, and use a single directory to store it. So I try to put it on /content/posts/image/xxx.img and write md file with ![](/content/posts/images/2022-11-10-17-33-49.png) it’s work in vscode but not in website. Is there way to view it on vscode and website at a same path?

2

Create a page bundle.

content/
├── post/
│   └── post-1/
│       ├── a.jpg
│       └── index.md
└── _index.md

content/post/post-1/index.md

+++
title = 'Post 1'
date = 2022-11-10T22:36:38-08:00
draft = false
+++
![alt](a.jpg)
3

Thanks, is there any way to save all images to one dir like

content/
├── post/
│   └── post-1/
│       └── index.md
│       └── index1.md
│   └── images/
│       └── a.jpg
│       └── b.jpg
│       └── c.jpg
└── _index.md
4

If the images will only be referenced by post-1, you could create a subdirectory under post-1.

If the images will be used throughout the site, place them in /static/images.

5

But, getting back to your original requirement:

view it on vscode and website at a same path

If the images will be used throughout the site:

  1. Create an images directory to the root of your project

  2. Add this to your site configuration

    [[module.mounts]]
source = 'static'
target = 'static'

[[module.mounts]]
source = 'images'
target = 'static/images'

  3. Reference the image in your markdown with:

    ![alt](/images/a.jpg)

If your baseURL has a subdirectory (e.g., https://example.org/foo/), we will need to revisit this.

1 Like
6

Thanks a lot. it works!
And I find this

[[module.mounts]]
source = 'static'
target = 'static'

can ignore， because it’s default value.

7

You can’t ignore it if you plan to use the static directory for anything else (e.g., CSS, JS).

https://gohugo.io/hugo-modules/configuration/#module-config-mounts

When you add a mount, the default mount for the concerned target root is ignored: be sure to explicitly add it.

8

Ok , get it.

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.