All Image Cannot be Displayed After Update

[hanyangclarence]

Have you checked that your issue isn't already filed?

• I read through FAQ and searched through the past issues, none of which addressed my issue.
• Yes, I have checked that this issue isn't already filed.

Bug description

After a normal update of one image, all images on my website cannot be displayed

How to reproduce the bug

I have used this webpage as my personal website for a long time and it works well. I deployed the website directly on Github. The website is https://hanyangclarence.github.io/

But today I updated an image (replacing an existing image with a new one with the same file name), and suddenly all images on the website cannot be displayed. Then I checked the github update information and found nothing wrong with my update. But when I checked the corresponding update on gh-pages branch that is automatically done, I found that all the .webp files are deleted:

I have read the source code of the website on the browser and noticed that those .webp files should be loaded and displayed. But after my update, all of them are somehow deleted and no new .webp file is generated. I guess this is why all figures on my website cannot be displayed.

Do you have any idea what's going on? Thanks a lot!!

Error messages and logs

On the browser, the image just cannot be displayedj, e.g.:

What operating system are you using?

Not applicable (e.g. you're using GitHub Pages or other hosting)

Where are you seeing the problem on?

Deployed site

More info

The source code of the website is in here. The website link is in here. You can just visit and read the code! Thanks a lot!

[george-gca]

If you check your deploy action, the image conversion part in the Install and build section fails silently with Imagemagick: Command returned pid 2029 exit 127 with error sh: 1: convert: not found. This is actually a duplicate of #2902.

As pointed here, this issue happened because imagemagick is no longer pre-installed in the ubuntu-24.04 github action environment, which is now pointed by the ubuntu-latest image.

Add this line to your .github/workflows/deploy.yml in the same way that it is in ours, and you are good 2 go.

[hanyangclarence]

I tried it and it works! Thanks! But I found that it only works for jpg images, and gif still cannot be loaded. Do you have any further idea?

[george-gca]

I believe it is best to close this issue and centralize the discussion about gifs in #2951.

[hanyangclarence]

Okay! Thanks!

[hanyangclarence]

I checked that issue but I'm still a bit confused. My issue seems not similar to that one. Also, my website is in an earlier version written with html.

In the corresponding _includes/figure.html code, mine version is:

{%- assign img_path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" | remove: ".gif" -%}

<figure>
  <picture>
    <!-- Auto scaling with imagemagick -->
    <!-- See https://www.debugbear.com/blog/responsive-images#w-descriptors-and-the-sizes-attribute and 
      https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images for info on defining 'sizes' for responsive images-->
    {% if site.imagemagick.enabled %}
      <source class = "responsive-img-srcset" srcset="
      {% for i in site.imagemagick.widths -%}
      {{ img_path | relative_url }}-{{ i }}.webp {{i}}w,
      {% endfor -%}" 
      {% if include.sizes %} sizes="{{include.sizes}}" {% else %} sizes="95vw" {% endif %}
      type="image/webp"/>
    {% endif %}
    <img
      src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
      {% if include.class %}class="{{ include.class }}"{% endif %}
      {% if include.width %}width="{{ include.width }}"{% else %}width="100%"{% endif %}
      {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %}
      {% if include.min-width %}min-width="{{ include.min-width }}"{% endif %}
      {% if include.min-height %}min-height="{{ include.min-height }}"{% endif %}
      {% if include.max-width %}max-width="{{ include.max-width }}"{% endif %}
      {% if include.max-height %}max-height="{{ include.max-height }}"{% endif %}
      {% if include.alt %}alt="{{ include.alt }}"{% endif %}
      {% if include.title %}title="{{ include.title }}"{% endif %}
      {% if include.zoomable %}data-zoomable{% endif %}
      onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
    />
  </picture>

  {%- if include.caption -%}<figcaption class="caption">{{ include.caption }}</figcaption>{%- endif %}

</figure>

Sorry but I am not familiar with this field. Many thanks for your help!

[george-gca]

Can you point to the gif that is not showing? I'll try in my local setup.

[hanyangclarence]

The path is assets/img/publication_preview/preview_snapmem.gif and assets/img/publication_preview/preview_unimumo.gif.

On the website deployed on Github (https://hanyangclarence.github.io/), the gif cannot be shown is at here:

[sustcsonglin]

If you check your deploy action, the image conversion part in the Install and build section fails silently with Imagemagick: Command returned pid 2029 exit 127 with error sh: 1: convert: not found. This is actually a duplicate of #2902.

As pointed here, this issue happened because imagemagick is no longer pre-installed in the ubuntu-24.04 github action environment, which is now pointed by the ubuntu-latest image.

Add this line to your .github/workflows/deploy.yml in the same way that it is in ours, and you are good 2 go.

Thank you, it works for me!!

[george-gca]

@hanyangclarence I believe it is best to move this discussion about the gif to a new issue, and close this one.