Is there a simple way to display images in hugo?

I put the images in static/images folder and link it like this. In vs code, I can view them, but i can’t see them when I run hugo serve and see the output at localhost:1313. WHy?

I earlier tried to put them in content/images directory and same issue occurred.

If you place your images in the static/images directory, and if your baseURL does not include a subdirectory, do this:


The static directory contains files that will be copied to the public directory when you build your site.

And it looks like we have answered your question before:

What should the baseurl be?

See docs:

Got it boss. This is so uninituitive. I can’t seem to see where the image is in obsidian. What I do is paste images in obsidian, set the directory to default static/images where attachments are kept. But now I need to manually rewrite the URLs.

Search this forum for “obsidian”. I solved this problem before… it’s a matter of configuration.

1 Like

Ok doing it rn. This is bookamrked.

Obsidian configuration:

  "attachmentFolderPath": "attachments",
  "useMarkdownLinks": true,
  "newLinkFormat": "absolute"

Hugo configuration:

enableDefault = true

enableDefault = true

source = 'assets'
target = 'assets'

source = 'attachments'
target = 'assets/attachments'

The attachments directory in the root of your project might look something like this:

├── documents/
│   ├── a.pdf
│   └── b.pdf
└── images/
    ├── kitten-a.jpg
    └── kitten-b.jpg


git clone --single-branch -b hugo-forum-topic-49627 hugo-forum-topic-49627
cd hugo-forum-topic-49627
hugo server

And this is a really stupid limitation in Obsidian:

They need to fix that to provide compatibility between Obsidian and VS Code Markdown Preview mode.

1 Like

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