Wrong image src attributes, but correct in source tag and srcset

[Colir]

Hello, I've just published a new website: https://legrostonneau-festival.fr/ When I'm scanning it with some link checker (Integrity, drlinkcheck, ...), I've got some 404 errors on image src (but the images are displayed, because the source tag and srcset are correct). For example, I've got this link for an image tag in his src attribute "_astro/logo-pixo", But got this in the source tag associated with this img "/_astro/logo-pixoil@228w.1a4eb20c.png" (which is correct).

I use the Picture components from 'astro-imagetools/components'.

Do you have any suggestions?

Thank You

[canastro]

I'm facing the same issue. Were you able to fix this @Colir ?

[Colir]

Hi @canastro , not yet...

[bnjmnrsh]

Hi, I've also just run into this issue.

<img src="/_astro/testImage-1@150w.c2af48b8" alt="" srcset="/_astro/testImage-1@150w.c2af48b8.jpeg" sizes="(min-width: 150px) 150px, 100vw" width="150" height="150" loading="lazy" decoding="async" class="astro-imagetools-img astro-imagetools-img-F38C6D17" style="display: inline-block; overflow: hidden; vertical-align: middle; ; width: 100%; height: 100%;" onload="">

An my terminal barfs out a lot of 404's from the dev server, browser console as well.

21:23:23 [404] /_astro/testImage-1@150w.c2af48b8 17ms
21:23:23 [404] /_astro/testImage-10@150w.15a8694a 10ms
...

[bnjmnrsh]

The <Img> component, relies on ../api/renderImage.js

Which after a lot of preamble and set up comes to the following on line 76:

 ...

  const sources = images.flatMap(({ sources, sizes, imagesizes }) =>
    {
      console.log(sources) // ADDITION 

      return sources.map(({ src, srcset }) =>
        getImgElement({
          src,
          alt,
          sizes,
          style,
          srcset,
          loading,
          decoding,
          imagesizes,
          fadeInTransition,
          layoutStyles,
          imgAttributes,
          imgClassName: className,
        })
      )
    }
  );
  const [img] = sources;

  return { link, style, img };

The output of the console statement looks like:

[
  {
    src: '/_astro/RememberingTogether_DumfriesLaunch_300dpi-9@150w.c78a7037',
    format: 'webp',
    srcset: '/_astro/RememberingTogether_DumfriesLaunch_300dpi-9@150w.c78a7037.webp'
  }
]

The src property appears to be passed and output verbatim to getImgElement(), which assembles the output. So, at this stage, we would have the opportunity to concatenate src + '.' + format. There doesn't appear to be a risk of side effects as the results of getImgElement() are passed to the <Img> component directly, which in turn shoots it into a fragment without any further processing.

The end result is:

...

  const sources = images.flatMap(({ sources, sizes, imagesizes }) =>
    {
      return sources.map(({ src, format, srcset }) => {
        src = src + '.' + format;
        return getImgElement({
          src,
          alt,
          sizes,
          style,
          srcset,
          loading,
          decoding,
          imagesizes,
          fadeInTransition,
          layoutStyles,
          imgAttributes,
          imgClassName: className,
        })
      });
    }
  );
  const [img] = sources;

  return { link, style, img };
}