Tranform Images not working with Large Media with Sapper

[erflynn21]

Hi, I’m having trouble getting Transform Images to work on my site. I am using Netlify CMS and pull in the url from markdown and then displaying that image. If I don’t pass in query parameters then the image displays fine (although is very large) but when I pass in query parameters to transform the image it doesn’t show the image at all. Add the query like this doesn’t work, leaving off the query loads the full image.

I’m not not sure what I’m missing here but I feel like I’m missing something obviously. I’ve tried to use the direct url and that doesn’t work either. I’m kind of at a loss at this point and would appreciate any help I could get. Thanks!

[luke]

Hi, @erflynn21, without seeing an actual URL, my best guess might be that this smaller image is being requested during the site build instead of on the live site but that is only a guess.

It would help to look at the actual URLs not working. Would you be willing to post one publicly?

You can also private message (PM) that to one of our support staff and I’ve confirmed that PMs are enabled for your community login. Note, that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.

[luke]

Hi, @erflynn21. Thank you for sending us the a link to the site in question.

The issue is happening because the site’s javascript service worker is returning an error for this URL. There is more information about service workers here:

[Support Guide] Understanding & unregistering service workers

Last reviewed by Netlify Support - August, 2023 A service worker is a script that your browser runs in the background to accomplish a variety of tasks. Browsers cache service workers for 24 hours by default, and don’t update them when you reload your page. Therefore, you may have a service worker on your site which could prevent you from seeing the latest and greatest changes that you’ve made. If you suspect a service worker is causing this issue, I recommend disabling/removing the service wor…

Netlify isn’t sending the error because the request never reaches our CDN nodes. Instead the local service worker (in the browser) is intercepting the HTTP request and returning the error. If you make the HTTP request directly to our CDN, it does work:

$ curl -svo /dev/null 'https://<some site subdomain here>.netlify.app/path/to/image.jpg?nf_resize=fit&w=500'  2>&1 | egrep '(\*   Trying|< )'
*   Trying 165.227.0.164...
< HTTP/2 200
< alt-svc: clear
< cache-control: public, max-age=0, must-revalidate
< content-length: 11874
< content-type: image/jpeg
< date: Wed, 23 Sep 2020 06:24:07 GMT
< etag: f932aee6012d29a3879be682ee148a775dae1a4b8b221519be7c3c09089498c0
< via: 1.1 google
< x-bb-gen-id:
< age: 19
< server: Netlify
< vary: Origin
< x-nf-request-id: e4e2c936-17d6-40a1-87d7-be5e757ea725-19182526
<

Obviously, the URL in the curl example is not the actual URL.

However, if you do use curl or wget to fetch the actual URL from the PM, it does work. This is because wget and curl don’t run javascript and are therefore not using the service worker.

The only reason it doesn’t work in the browser is the service worker incepts the HTTP request there and the service worker is what returns the error.

If there are other questions about this, please let us know.

[erflynn21]

Ahh that was it! I updated the service worker and all is working now. I knew it was a simple solution. Thank you so much for your help!