baseURL for img tags in template files

support
1

Hi everyone !

For my website, I use some img tags in partials, refering to some images I store in /static.

In local, I have no issue. But, when I deploy my website as Github Pages, I see that all my img tags refer to my root domain instead of the full baseUrl path I’ve set in Hugo configuration.

I read a lot of posts about this issue but I didn’t figure out how to fix it properly.

I’m really desperate as this is the only issue I have …

Any idea how to fix that properly ?

Thanks !
Rémy

2

Have a look at

1 Like
3

Hi Bjørn !

Thank you for your answer !

I already tried absURL and relURL functions but they don’t fix the issue:

In hugo.toml
baseURL = 'https://<USERNAME>.github.io/website'

In a partial:
   <p>relURL: {{ "/images/social-networks/linkedin.svg" | relURL }}</p>
   <p>absURL: {{ "/images/social-networks/linkedin.svg" | absURL }}</p>

output:

   <p>relURL: /images/social-networks/linkedin.svg</p>
   <p>absURL: https://<USERNAME>.github.io/images/social-networks/linkedin.svg</p>
4

Try removing the leading slash

{{ "images/social-networks/linkedin.svg" | relURL }}
1 Like
5

Wow, thanks Arif !

I had to put the whole src in double quotes but it works like a charm :smiling_face:
<img class="profile-image" src="{{ "images/profile.png" | relURL }}"/>

Thanks for your help guys !

I have a last question about image pathes which are dynamically built using context like:
<img class="techno-image" src="{{ "images/technologies/{{.}}.svg" | relURL }}" />

In this case, {{.}} is not replaced by the current context value. Do you know if there is a solution to force replacing it before passing the string to relURL ?

Have a nice day !
Rémy

6

For my last question, I used the replace function as follow and it works :slight_smile:

<img class="techno-image" src="{{ (replace "images/technologies/%s.svg" "%s" . 1) | relURL }}" />
7

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