Images missing when publishing a Hugo site on GitLab

[tmaric]

I’m trying to use Hugo to write a blog and the SVG images are missing both when served locally and on GitLab pages. On GitLab, the CI pipeline is successful, no errors are shown, also when I run locally

hugo --debug --disableFastRender --path-warnings -v serve

I do not get any errors. My images are placed in static/img/pytorch-sequential-cpp and are refered to using Markdown in the post as

![svg](/img/pytorch-sequential-cpp/nn-64-64-Ns1000-Ne1000-Adam001.svg).

I have also tried

![svg](img/pytorch-sequential-cpp/nn-64-64-Ns1000-Ne1000-Adam001.svg)

and it didn’t help. I have read on this forum that I can organize static sub-folders however I want, so I guess the problem is not with the sub-folders. I also tried putting the images directly in static and also in static/img, nothing works.

Here are the links:

• The blog post
• The markdown file of the blog post

I’m using the hugo-vitae theme as a sub-module and I’ve applied the changes to it to enable MathJax, but this seems to work fine.

What’s the issue here? Thanks!

[davidsneighbour]

Where is the folder /img? In content? Take it out and move it to /static. Everything in static get’s copied over to public.

When you copied img into static, then use /img in the beginning of the url.

[tmaric]

The img is already in static, the final subfolder is static/img/pytorch-sequential-cpp, this is where I keep the images of the pytorch-sequential-cpp post. I tried img/... and /img/... in the Markdown link and nothing changes. I’ve read about the static folder in the documentation, so I’ve used it acordingly.

[davidsneighbour]

Your page tries to load the image at https://tmaric.gitlab.io/blog/posts/pytorch-sequential-cpp/img/pytorch-sequential-cpp/nn-64-64-Ns1000-Ne1000-Adam001.svg.

(Right click into the page, last point in the menu should be something like inspect and you can see the browser console.)

[davidsneighbour]

tmaric/blog/-/blob/master/content/posts/pytorch-sequential-cpp.md#L182

ehem. put a slash in front

[pointyfar]

You are serving from a subdirectory, so the / at the beginning of the path is relative to yoursite.com/, not yoursite.com/subdir/

[davidsneighbour]

When I hover over the URL in that link (the second SVG image on that page) then it shows a gitlab URL. You have some kind of URL rewriting going on. Check what Gitlab is saying in it’s documentation about Resources hosted there. I never used it.

For the rest: the slash in front and the img dir in static should do the trick after that is fixed.

[tmaric]

I was experimenting with /img and img, and putting the images in content as well, and nothing worked. You can see the links of other images, they all use /img/... I’ve changed the first one now as well and pushed, no image is shown… Trying to use the “inspect”… never debugged a website… Thanks for the help btw!

[tmaric]

Does the fact that the site is served from tmaric.gitlab.io/blog impact hugo serving the site locally? Because the images are also missing when I do hugo serve locally…

[pointyfar]

If you use page bundles instead, you can keep the svg and the markdown in the same folder in content, so:

content/posts/lorem-post/index.md
content/posts/lorem-post/image.svg

you can use the following in your markdown:

![image](image.svg)

[tmaric]

Would this make things easier if I change the domain and the subfolder is not used anymore? Otherwise I guess I would have to go over all posts and remove /blog from all /blog/img/... instances.

[tmaric]

Using /blog/img/... in the Markdown links for images works. I’ll take a look at page bundles, this seems like a much cleaner solution.

[pointyfar]

Whether you use subdirectories is really up to you. You should see something like

Web Server is available at http://localhost:1313/subdir/

when you run hugo server locally with a subdir baseURL, so the same path question should arise.

Have a look as well at the setting the config option: relativeURLs = true : https://gohugo.io/content-management/urls/#relative-urls

which would allow you have static/image.svg and use

![image](/image.svg)

[tmaric]

Page bundles are working great. I’ll stick to them, then I don’t have to think so much about where the images are relative to the posts, and I have them in the same folder as markdown files which is nice.