GitLab Pages: Images in WebP Format Not Displaying

support
1

Hello, I am working on a website using Hugo extended v0.121.2. I am utilizing Hugo’s image processing features to convert images to the WebP format. However, I am encountering different results on my local machine compared to GitLab Pages.

The images used on the About page, menu icon and in posts display perfectly in WebP format on my local machine. However, the menu icon are not visible on GitLab Pages.

Repository: Kaptan / c4pt-mqs.gitlab.io · GitLab

Website (You can check the menu icon): https://myarchieve.net/

Checks I have performed:

  1. Ensured that image paths are correctly specified.
  2. Verified the image formats supported by GitLab Pages.
  3. Checked GitLab CI/CD settings and confirmed that image conversion processes are executed correctly.

I couldn’t identify the source of the issue, and I am seeking assistance on this matter. Perhaps someone in the community has faced a similar situation or can provide a solution. Thank you in advance for your help.

I am looking forward to your suggestions to resolve this issue.

2

Seems to be a GitLab pages issue. You should ask them here .

3

I don’t think so; I can render the images in posts and the about page in same way. So why the menu icon could not work?

4

Your image is broken: https://myarchieve.net/img/MyArchieve_hu8b85eec3c8a701afb5c8f50a697dcacc_17091_500x500_resize_q70_h2_box_3.webp

This is not a Hugo issue.

5

@kaptan

Your site config contains this:

 menuImage: /img/myarchieve.png

But your assets directory looks like this:

assets/
└── img/
    └── MyArchieve.png

I suspect you are a Windows user; the operating system is case insensitive. But providers such as GitLab, GitHub, Netlify, etc. build your site on a Linux distribution, which is case sensitive.

Get into the habit of using lower case for everything, and avoid spaces and special characters. This advice isn’t specific to Hugo.

6

I am a (MacOS) Unix system user.

That’s true that I realized it and changed it to lowercase. But it’s not broken now, code is gone. (But it’s working on localhost not in GitLab):

hugo.yaml:

Params:
  menuImage: /img/myarchieve.png  # or "https://example.com/image.jpg" for external images
  faviconImage: /img/icon.png

menu.html:

<div class="sidebar-header">
    {{ $logoImageURL := .Site.Params.menuImage }}
    {{ $isLocalLogo := strings.HasPrefix $logoImageURL "/" }}

    {{ if $isLocalLogo }}
    {{ $logoImage := resources.Get $logoImageURL }}
    {{ if $logoImage }}
    {{ $webp_param := (printf "%dx%d webp q70" $logoImage.Width $logoImage.Height) }}
    {{ $jpg_param := (printf "%dx%d jpg q70" $logoImage.Width $logoImage.Height) }}
    {{ $post_logo_webp := partial "ImageConverter.html" (dict "ImageSrc" $logoImageURL "ImgParam" $webp_param) }}
    {{ $post_logo_jpg := partial "ImageConverter.html" (dict "ImageSrc" $logoImageURL "ImgParam" $jpg_param) }}

    <picture>
        <source srcset="{{ $post_logo_webp }}" type="image/webp">
        <img src="{{ $post_logo_jpg }}" alt="Logo" class="my-image" loading="lazy"
            width="{{ with $logoImage.Width }}{{ . }}{{ else }}100%{{ end }}"
            height="{{ with $logoImage.Height }}{{ . }}{{ else }}auto{{ end }}">
    </picture>
    {{ end }}
    {{ else }}
    <!-- External logo image, display directly -->
    <img src="{{ $logoImageURL }}" alt="Logo" class="my-image" loading="lazy" width="100%" height="auto">
    {{ end }}

    <h1 class="brand-holder-one">
        <a href="/" aria-label="{{ .Name }}">{{ .Site.Title }}</a>
    </h1>

    <p class="brand-holder-sub">{{ .Site.Params.siteTagline }}</p>
    <hr class="style-one">
</div>
7

I have no idea what that means.

But you haven’t updated your repository in the last 45 minutes.

8

I actually add the changes in git. But MyArchieve.png file didn’t added. I did it again, can you check?

In website:
image

<picture>
    <source srcset="/img/archieve_hu8b85eec3c8a701afb5c8f50a697dcacc_17091_500x500_resize_q70_h2_box_3.webp" type="image/webp"><img src="/img/archieve_hu8b85eec3c8a701afb5c8f50a697dcacc_17091_500x500_resize_q70_bgffffff_box_3.jpg" alt="Logo" class="my-image" loading="lazy" width="500" height="500">
</picture>

In localhost:
image

<picture>
    <source srcset="/img/archieve_hu8b85eec3c8a701afb5c8f50a697dcacc_17091_500x500_resize_q70_h2_box_3.webp" type="image/webp">
    <img src="/img/archieve_hu8b85eec3c8a701afb5c8f50a697dcacc_17091_500x500_resize_q70_bgffffff_box_3.jpg" alt="Logo" class="my-image" loading="lazy" width="500" height="500">
</picture>
9

Remove the --ignoreCache flag from your build command.

2 Likes
10

Thank you for your help, this solved my issue. :white_heart:

11

To clarify, there were two problems:

  1. The GitLab build OS is case sensitive; always use lower case for everything.
  2. The --ignoreCache flag was triggering #8025.

#8025 was fixed by #11894, available in the next release.

3 Likes
12

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