Error on inline image using standard markdown notation

[gmuller]

What happened?

I have a markdown file with an inline reference to an image. It looks like this:

![image-2.png](/obsidian/image-2.png)

when I try to generate the site or serve locally, I get the following error message:

ERROR 2022/02/16 13:17:04 [CONGO] Markdown image error in "obsidian/write-test.md": Resource "/obsidian/image-2.png" not found. Check the path is correct or remove the image from the content. Error: Error building site: logged 1 error(s)

I've tried putting the file in the correct static dir, and in the content dir, and cannot seem to make this work. I'm assuming this is Congo specific based on the error message, and when I test with a different theme (hugo-bearblog) the image renders correctly with no error messages.

Theme version

2.0.4

Hugo version

0.92.2

What browsers are you seeing the problem on?

No response

Relevant Hugo log output

`ERROR 2022/02/16 13:17:04 [CONGO] Markdown image error in "obsidian/write-test.md": Resource "/obsidian/image-2.png" not found. Check the path is correct or remove the image from the content.
Error: Error building site: logged 1 error(s)`

[MikiVanousek]

You never include the /, you use relative path. Relative to what? Either the directory your content is in, or the assets directory.

If the image is in the content directory content/obsidian (the same directory as write-test.md) you reference it just by name, hence image-2.png.

If you put it in assets/obsidian/image-2.png' you reference it by obsidian/image-2.png`.

[gmuller]

That is not how I understand the documentation related to static file hosting here

By default, the static/ directory in the site project is used for all static files (e.g. stylesheets, JavaScript, images). The static files are served on the site root path (eg. if you have the file static/image.png you can access it using http://{server-url}/image.png, to include it in a document you can use ![Example image](/image.png) ).

In my case, the image file is in static/obsidian/image-2.png

Also, this is working just fine with other themes, and the error message above seems to originate from Congo, not Hugo. I was going to dig into it personally later, but thought I'd report it here.

[jpanther]

Thanks for the issue report, however this is not a bug as this is the expected behaviour.

Version 2 of the theme uses Hugo Pipes to process images and as such they need to be supplied as assets, either in the assets/ directory or using page bundles. You cannot use standard Markdown syntax to include static image assets, however the figure shortcode does allow you to achieve the same behaviour, if required. You can read more about this functionality in the shortcode docs.

Just so I can understand more about your workflow, is there a particular reason you can't include these images in the page bundle?

[gmuller]

I don't think there is any reason why I couldn't relocate the static image files to another directory for processing, I've just had this blog with hugo for a long time and would need to transition the files out of static and into assets I guess. I think I can also set the assetDir configuration to the static folder to test this out. I will try a few things a bit later.

I would of course like to use "standard markdown" (if there is such a thing) as much as possible rather than customize the posts for Hugo's implementation.

[gmuller]

I still think there is an issue here. What I have is a branch bundle according to the Hugo docs here. I should be able to dump all of the images directly into this folder along with my md files and the _index.md file and the images should be available to the files in that directory. So I relocated all of the images to the same folder as the md files, and it still does not work. I'm not sure why, but in render-image.html, $Page.Resources.GetMatch is not finding the string passed into it if the folder is a branch bundle. If I make it a leaf bundle it works, but thats not what I'm trying to accomplish here (it would mean I'd have to move all of the individual posts into their own folders, rename to index.md and move the associated images there).

According to the docs, you cannot get access to images in assets or static using $Page.Resources either.

[gmuller]

So I think based on the documentation you have to treat a branch bundle's resources differently than a leaf bundle. I think if the .Kind is a section, then the resources are accessed via .Page.Parent.Resources, since the _index.md file is the parent of that subsection. That is also discussed in this post. Another way is the look at the page bundle type, which could be leaf or branch as mentioned here

[robotamer]

I thing what is happening is: your "figure shortcode" overwrite is breaking hugo's approach to backwards compatibility, as well still current Static Files approach.

https://gohugo.io/content-management/static-files/

[gmuller]

Yeah, @robotamer I think you're right. I have found that if I override _default/layout/render-image.html and replace the code at line 10:

{{ with $.Page.Resources.GetMatch ($url.String) }}

with

{{ with resources.Get ($url.String) }}

Then I can simply move everything from static to assets and my very old blog will work.

So, there probably needs to be an if statement here to first look for the image in the local directory so that it works with leaf bundles, and a fallback to look in the resources directory.

[jpanther]

Thanks for the detailed comments on this issue. I've had a further look at this and agree that adding extra functionality so that resources can be found in both the assets directory and page bundles is a better user experience. Doing this also provides all the performance benefits of image scaling, etc. that the theme aims to achieve.

I'll make some changes in the next release to adjust this behaviour and hopefully it will improve the image handling in your use case.