Images missing when publishing a Hugo site on GitLab

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


I have also tried


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:

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!

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.

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.

Your page tries to load the image at

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

ehem. put a slash in front :stuck_out_tongue:

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


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.

1 Like

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! :slight_smile:

Does the fact that the site is served from impact hugo serving the site locally? Because the images are also missing when I do hugo serve locally…

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


you can use the following in your markdown:


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.

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.

1 Like

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 :

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

1 Like

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.

1 Like

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