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
content? Take it out and move it to
/static. Everything in static get’s copied over to public.
When you copied
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/... 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
You are serving from a subdirectory, so the
/ at the beginning of the path is relative to
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.
I was experimenting with
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!
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…
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/... in the Markdown links for images works. I’ll take a look at page bundles, this seems like a much cleaner solution.
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
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.
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.