HUGO

How to use a local image when importing content with a Hugo module?

Hi, I’m trying to use content import via a Hugo module configuration.
This works fine for pure text, but when I try to combine text in the .md file with a local image via ![image info](./localimage.svg), the image link is broken when looking to the generated Hugo website.
Only when I change the path to the full relative path for the generated website, like ![image info](/fullpathto/localimage.svg), the image is proper shown.
Is this not supported? Or is there some extra tricks/configuration needed to make this work?

More context:

  • the content import is from documentation made by colleagues in another git project (a docs subfolder)
  • in there I just add the go.mod file with needed git reference and the .md files get extended with a proper Hugo front matter
  • for the colleagues it is logical to be able to create documentation with local images added to their .md files, so they can validate their work locally
  • the idea was to collect this documentation from the different git projects in the central Hugo website git project via hugo modules
  • this works perfect for pure text, but at first sight not for locally added images :thinking:
  • I was expecting that local images, which proper appear next to the .md files in the generated _vendor folder with hugo mod vendor, were also part of the “virtual file system” generated by the Hugo/go modules and could still be accessed with the simple ./localimage.svg path.

Can somebody help with more experience in using Hugo modules?

Kind Regards, Patrik

It seems to me that your issue has more to do with content organisation rather than modules.

If the project uses Leaf Bundles then you should be able to reference images via: ![image info](localimage.svg) and Hugo should take care of the rest, otherwise you will need to specify the full img PATH.

Please try this:

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

There are three articles, each with an image specified with a page-relative path, imported from:
https://github.com/jmooring/hugo-content

There must be something different about the structure of your content module.

Indeed @onedrawingperday my problem was not using also leaf bundles at the source. This way both the local git project developer can still validate their documentation including the images and the import to hugo via hugo modules don’t need a path conversion for the images. I was expecting too much from hugo modules :wink: Thanks!

Also @jmooring thank you for providing an example. I could unchanged use it to integrate with my Hugo website. This made clear what little changes I had to implement to make this work. :grinning: Thanks!

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