Image address is not correct for static pages in a subfolder

1

Problem: the address generated for an image does not include the path to subfolder

Hello, I tried to build some posts to be uploaded as static pages in a subfolder of my server, a.e. http://my.server/hugo/myposts/ .

In the source, the images are copied in /static/images/ and referred as

![My Image](/images/myimg.jpg)

While baseurl was set to http://my.server/hugo/myposts/ , the generated html address was

<img src="/images/myimg.jpg" ..

This address is fine if the static pages are build for and installed in the www server root, but the image does not show if they are build for and installed in some subfolder.

Am I missing something?

2

And where are you putting the image files exactly?

For example, I have this structure:

content/post/what-i-learned/

and in the what-i-learned folder I have the .md and the image files. That way this url to the image is correct: /post/what-i-learned-from-benjamim/cover.jpg

3

when you have src="/images/blah.jpg" with the slash in front, that means from the root of the domain. so it will look for those files located at my.server/hugo/myposts/images/blah.jpg

the BaseUrl needs to point to the root, OR you need to reference the image differently, maybe using relref?? check the docs.

it works on the hugo server because that ignores your baseurl.

4

I remember having a few issues some months back. All I did to solve this was to stop using base URL in the header markup (I’ve never used baseurl on any of my sites before anyway).

5

If you don’t use BaseURL in your templates, do you still get absolute canonical links in your pages?

6

You can use relative URLs for your Canonicals - https://webmasters.googleblog.com/2009/02/specify-your-canonical.html

I must admit, at the time I didn’t bother to spend time looking at it, as everything worked fine without base URL in the header markup. Like I said, I never used Base URL before on any websites, so I didn’t think twice about deleting it.

I am not saying this is the best way, and I don’t really have time to argue the case one way or the other (swamped with work).

7

Thanks for you answer,

The present structure of my hugo source is:

  • posts are in content/post/ , a.e. content/post/mypost.md
  • images are in static/images/ . a.e. static/images/myimg.jpg
    and the rendered static files are:
  • posts are in post/ + subfolders , a.e. post/mypost/index.html
  • images are in images/ , a.e. images/myimg.jpg

You suggestion to work with subfolders gathering the post and their images is interesting.

8

Thanks for anwering,

In mypost.md source, I tried the three following references for myimg.jpg:

  1. /images/myimg.jpg
  2. images/myimg.jpg
  3. ../../images/myimg.jpg
    in combination with 3 baseurl:
  4. internal server: baseurl = "http://localhost/"
  5. external server in root: baseurl = "http://my.server/"
  6. external server in subfolder: baseurl = "http://my.server/some/path/"

For the internal server, image reference 1 and 3 are correct.

For the external server, with hugo static pages in root, form 1 and 3 are correct.

For the external server, with hugo static pages in a subfolder, form 3 is correct.

As a summary:

  • only form 3 ( ../../images/myimg.jpg ) works in the 3 server configurations
  • form 2 does not work in any of the 3 configurations

I also tried to use refrel, but without success for now.

9

Just to be clear, the internal server (if you are using hugo server) ignores your baseurl completely. doesn’t matter what you put.

Also, it’s relref I think… might be a typo but just making sure.

if you are using permalinks to change the URL of a specific section, bundling your assets with your post won’t do much good, it’ll actually be more work. if you don’t use permalinks to change the url, then you can use relative folders to link to assests in the bundled folder. Example 2 in your case. The like without the slash in the front signifies relative to the content. With the slash in the front it signifies relative to the domain root.

10

You are right, it is relref . I found some examples on https://gohugo.io/content-management/shortcodes/#ref-and-relref ,
and tried the form ![My Image]({{< relref "images/myimg.jpg" >}}) , but I surely miss something because I got a warning and an empty reference.
I will work with relative references for now.
Thank you for your advice.

11

actually as I look at it, I don’t think relref is for images… it’s for linking to other content files.

but yea, whatever finally works for you.