How to Optimize Image Insertion and Management with HUGO and Obsidian?

support
1

Hello everyone!

I really enjoy using Obsidian for note management, and recently, I’ve also built my own blog website using HUGO. However, I’ve encountered some issues with image insertion and management, and I hope to get help and advice from all of you.

My usage habits:

  • In Obsidian, I’m accustomed to using relative paths to insert images and store all images in a dedicated attachment folder.
  • I’m not a fan of using online image hosting services and prefer local storage for images.

Issues encountered:

When syncing or publishing content from Obsidian to my HUGO blog, compatibility issues arise with image paths and insertion methods, resulting in images not displaying properly.

I’d like to ask:

  1. When using Obsidian daily alongside a HUGO blog, what are the recommended methods for saving and inserting images?
  2. How can I handle image path issues to ensure images display correctly in both Obsidian and my HUGO blog?
  3. Are there any relevant plugins or tools that can simplify this process?

I look forward to hearing your experiences and suggestions. Thank you!

2

Hello, I recently built my own blog using HUGO, and I’m struggling with image processing. Firstly, I am an Obsidian user, and I really like to keep all my images in a single folder. For example, my Obsidian has a dedicated Attachment folder for all the images in the library.

While exploring HUGO, I found many solutions and noticed that you have provided a lot of answers on this topic. I would like to seek your advice on the following. As of now, is creating an Attachment folder under the HUGO main directory and then pointing to assets/attachments via module.mounts still the best approach?

Is the configuration necessary? I noticed that even without these configurations, the images seem to render properly:

[markup.goldmark.renderHooks.image]
enableDefault = true

[markup.goldmark.renderHooks.link]
enableDefault = true

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

[[module.mounts]]
source = 'attachments'
target = 'assets/attachments'

I’m really looking forward to your guidance. I hope to achieve an optimal solution for image processing in HUGO combined with Obsidian.

3

@jmooring

Hello, I have compiled all the related records into this post and am very much looking forward to your guidance. The goal is to solve the image display issue by combining the use of HUGO and Obsidian.

4

Have you tried the test site referenced topic #49627 ?

git clone --single-branch -b hugo-forum-topic-49627 https://github.com/jmooring/hugo-testing hugo-forum-topic-49627
cd hugo-forum-topic-49627
hugo server

That is still the best approach, and the configuration is necessary, otherwise I would not have included it.

And for the record, this is still a really stupid Obsidian bug/limitation:
https://forum.obsidian.md/t/start-absolute-path-with-a-leading-slash/32501

5

Yes, I have run that example. The essential issue is that Obsidian does not automatically add a leading slash (/) in the “Absolute path in vault” link format.

Alright, if that’s the case, then I will refer to your solution and release the first version of my blog. Because I really don’t want to use an image hosting service.

It seems that to use HUGO well, I need to learn some front-end knowledge and understand how directories are generated.

I am honored to receive your reply.

6

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