Getting images to display in Hugo from Attachments sub directory

support
1

Greetings,
I am having problems getting Hugo to use the Attachments directory where I store all images. I put all the markdown files in posts directory next to it is the Attachments directory. I edit the config.toml file as follows

 [module]
 [[module.mounts]]
  source = 'content/posts/Attachments'
  target = 'static'

This is my git repo GitHub - thisismelki/VS
but Hugo is not showing the images. Thank you

Screen Shot 2022-12-03 at 6.17.09 PM
Screen Shot 2022-12-03 at 6.17.09 PM828×864 31.1 KB

2

First, you are asking for problems when you:

  • Include spaces in file or directory names
  • Include more than one period in a file name
  • Use upper case letters in your file or directory names

Second, your module mount is fine.

Third, I suspect that you are doing this;

![alt](/Pasted image 200204051234435.jpg)

Instead of this:

![alt](</Pasted image 200204051234435.jpg>)

That’s one of many reasons why your file and directory names should not include spaces.

The markdown specification is clear:
https://spec.commonmark.org/0.30/#link-destination

2 Likes
3

Well the image is now displaying in Hugo but not displaying in Obsidian any ideas how to get images to display in both Hugo & Obsidian?


displays on Obsidian only
![Red & Green Text](Pasted%20image%2020221203183750.png) 
displays on Hugo site only
![Red & Green Text](/Pasted%20image%2020221203183750.png)
link to Hugo vs Obsidian image
https://imgur.com/a/XqLazcu
4

Test an image that does not have a space in the name.

5

I looked at your directory structure again. There’s no way that will work. See:

https://discourse.gohugo.io/t/help-with-link-images-to-see-from-absolute-path-including-static/41177/2

1) Move the Attachments directory to the root of your project.
2) Change your site configuration:

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

3) Reference the Attachments directory in your markdown:

![my image](</Attachments/Pasted image 20220913193250.jpg>)

You will be able to see the image in Obsidian, vscode, etc.

But your life will be easier if you do not:

6

I tested with an image with no spaces called woeih.png. But it still does not display on Obsidian. I also moved the attachments + module mounts.

[Album] Hugo vs Obsidian image display

I am just going to manually or programmatically make a copy of the markdown file & change it to the way that displays it in Hugo.

Thanks though for the help

7

Using the instructions I provided, it works perfectly.

8

I just moved the Attachment dir back to where the markdown file is & it displays in Obsidian

9

Here’s a simple example. The image in the markdown renders in Obsidian, vscode, etc.

I’m not sure what you’re doing wrong, but maybe this example will help:

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

It is working on both Hugo & Obsidian not sure what happened previously
The following displays images in both Hugo & Obsidian.

![my image](</Attachments/woeih.png>)
![my image](/Attachments/woeih.png)
![something goes here](<../../Attachments/woeih.png>)

I changed the config file to

source = 'content/posts/Attachments'
target = 'static/Attachments'

after reverting the Attachments folder back to where all the markdown files are. For some reason it seems Obsidian is not picking up the Attachment dir when placed in the root of the project.

Also I have to note that the local server would show the images being display but when git pushing to the live site the images would not show🤷🏼‍♂️
Either way I appreciate it :pray: