Images are not rendered

support
1

Hi,

For some reason my images are not rendered in the public folder. Not sure if I can do this in my code but I looking for some icons to load depending on the language.

This is the code of my header.html in my partials:


                {{ range .AllTranslations }}
                {{$imageName := printf "images/idiomas/%s.webp" .Language.LanguageName | urlize }}
                {{$idioma := resources.Get (printf "%s" $imageName)}}
                <a href="{{ .Permalink}}"><img src="{{$idioma}}" alt="{{.Language.LanguageName}}"></a>
                <script>
console.log({{$idioma}});
                console.log({{$imageName}})
                </script>
                {{ end }}

Console logs are showing the right path, but unfortunately the images are not populated although they exists.
Github site: GitHub - robergimenez/hugo

2

can you post the code generated ?

3

Filename case-sensitive issue?

1 Like
4

As mentioned by last comment by @razon , it seems a file name issue. The language name in hugo.yaml start with capital letter while your image file name are all small letters. You can change the file names to match the language names and see if it works.

1 Like
5

I was thinking the same, but it’s not working either.
Indeed if I rename my files capitalizing them the result is worst.

This is the result in the console for English.webp and spanish.webp italian.webp. As you can see, the first console log for English is giving null for the capital one. It’s look weird to me.
It makes sense because as you said the .yaml config is indicating in capitals, console log for variable imageName is not capital (weird).

image
image633×567 83.7 KB

6

Thanks, Tom.

This is what ouput console log.

image
image633×567 83.7 KB

7

It doesn’t look like is a case-sensitive error, it’s not working either capitalizing the file names.

8

It’s a case-sensitive issue, it works after lower language name and renaming the corresponding images in lowercase. I think you missed one to rename.

{{ range .AllTranslations }}
  {{ $imageName := printf "images/idiomas/%s.webp" (lower .Language.LanguageName) | urlize }}
  {{ $idioma := resources.Get $imageName }}
  <a href="{{ .Permalink}}"><img src="{{$idioma.RelPermalink }}" alt="{{.Language.LanguageName}}"></a>
{{ end }}

$ tree themes/appsandclouds/assets/images/idiomas
├── english.webp
├── italian.webp
└── spanish.webp

image

1 Like
9

Thanks razon.
I do find the issue thanks to your code.
The issue was not a lower case one, rather than I forgot in my code to add RelPermalink to the variable $idioma (This is an error I have all the time) but I was to realize about it thanks to your code. So you in one way, you have the reason.

Thank you for your support.

10

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