PNG images are not loading properly on branch deploys (other files succeed)

Support
1

For some unknown reason, any publicly accessible png image files in our publish directory aren’t accessible in branch previews. They are getting sent with the proper header information but for some reason that content has been garbled in some way that we don’t understand. Any help is greatly appreciated.

Errors received

CleanShot 2024-01-08 at 15.05.00

Examples:

Example images that FAIL to load:

"https://dev--pronto-web.netlify.app/images/common/full-arrow.png"
"https://dev--pronto-web.netlify.app/images/common/hamburger-icon.png"
"https://dev--pronto-web.netlify.app/images/fileicons/pdf_icon.png"
// and any other `png` images

Example images that SUCCESSFULLY load:

"https://dev--pronto-web.netlify.app/images/common/dot.svg"
"https://dev--pronto-web.netlify.app/images/common/no-search-results-dark.svg"
// and any other `svg` images

Debugging information:

HTTP/2 200
accept-ranges: bytes
age: 0
cache-control: public,max-age=60, s-maxage=86400,must-revalidate 
cache-status: "Netlify Edge"; fwd=miss 
content-type: image/png
date: Mon, 08 Jan 2024 20:57:57 GMT
etag:
"2e5ac9fc90xxxxxxxxcf8b66bff3f2b3-ss1"
server: Netlify
strict-transport-security: max-age=31536000; includeSubDomains; preload vary: Accept-Encoding x-nf-request-id: 01HKNDxxxxxxxxxxxxOVYPXWBMFVNP

As you can see above, the content type is correctly coming through as image/png, but the actual content is severely distorted, which you can see in this screenshot comparison of the binary data (since Netlify won’t let me embed the screenshot here directly).

We’ve validated that all of these files correctly exist in our deploy bundle, as you can see in this screenshot here (since Netlify won’t let me embed the screenshot here directly).

We’re not using Netlify Large Media or anything like that so we don’t expect our image files to be processed in any way, but it appears something is happening to the png images before they are passed through to the requesting client.

This issue appears similar to this github issue "Error: Input file contains unsupported image format" on Netlify (works locally) · Issue #2591 · lovell/sharp · GitHub where another user is complaining that images aren’t being processed properly and are being encoded into ASCII text which appears to be the encoding used in our case as well.

Please help

Any information you can provide would be much appreciated. Thank you!

2

Are you importing the images in Vite or directly linking them? If you’re doing the former, I’d suggest the latter.

3

No, we’re linking to the images directly:

<img
	src="/images/common/full-arrow.png"
	class="back-button"
	@click="goBack"
	:alt="$t('common_button_back')"
	tabindex="0"
	autoFocus
/>

And like I said, the images in the publish directory all look fine. If Vite were doing something strange at build time to “optimize” the images, then the image files in the publish directory would also be modified. But they are completely normal.

Here is an example of this same image above but directly downloaded from the publish directory:

full-arrow

So, based on the information I have, it appears something unusual is happening when the image gets transferred from Netlify to the client.

4

And even then, if you just paste this link into your web browser bar or do a GET request via Postman or even use curl, you will see that the image fails to load.

“https://dev--pronto-web.netlify.app/images/common/full-arrow.png”

Here’s that same link as an image: full-arrow

There IS an image at this path in the publish directory. But the image fails to load, but still sends a 200 http status code. It doesn’t matter how the image itself is getting requested. It’s not trasferring properly from Netlify.

5

You’re running an Edge Function on all paths, including images. I think something is causing troubles with that.

6

@hrishikesh You were right! I don’t know why I didn’t think of it before. I don’t really understand why it was working fine for SVGs, but maybe they were able to just ignore the extra content or something? Anyway, I found this article in the Netlify docs that shows how to add a config object with an excludedPath option to the edge function source code, so I added all of our static assets to that list of excluded paths. After some testing, that seems to have resolved the issue. That you for your help.