Help with link images to see from absolute path including "/static"?

support
1

Hi,
I’m using HUGO to build my blog and I want to read it in local with Obsidian.md but I have a problem with the view of images.
I can’t link images properly in Obsidian and the result is that the image does not exist, because the “/static” folder is not refereed when linking an image.

I would like to see the articles of my blog with Obsidian and not rendering every time to see in localhost with hugo server .

├── assets/
├── content/
	├── descriptions/
	├── post/
		test.md
├── public/
├── resources/
├── static/
	├── img/
	     ├── test.jpg
	     ├── sample-video.mp4
└── themes/

The article test.md has a link to test.jpgbut I can’t see the content in Obsidian with this link format ![test|100x200](/img/test/test.jpg#center)

Solution

Put the links in HUGO as:

  1. Absolute path from vault: ![Test|100x200](/static/img/test/test.jpg#center) or ![Test|100x200](static/img/test/test.jpg#center)
  2. Relative path: ![Test|100x200](../../static/img/test/Test.jpg#center) or Test
  3. File name: ![Test|100x200](Test.jpg#center)

How can I do that? Thanks.

2

Create an images directory in the root of your project:

images/
├── a.jpg
├── b.jpg
└── c.jpg

Then mount it to static/images in your site configuration.

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

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

Then reference the image in your markdown using an absolute (leading slash) path:

![alt text](/images/a.jpg)
3 Likes
3

Thank you very much, I was struggling with this for a long time.
Just what you said, I move my folder img/ to the root project and add to the config.yml:

module:
  mounts:
    - source: static
      target: static
    - source: img
      target: static/img

Now I can use Obsidiand.md and HUGO framework very nicely.

2 Likes
4

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