Image Resize on Worker return 404

Developers Workers
1

Hi, :grinning:
I am on business plan, and my Cloudflare domain is istaging.com. I am trying to run image resize on my worker, which custom domain is demo.istaging.com. I met 404 response when I add query in the url.

  • 200 https://demo.istaging.com/istaging.png
  • 404 https://demo.istaging.com/istaging.png?w=100
  • 200 https://www.istaging.com/cdn-cgi/image/width=100/https://storage-dev.istaging.com/istaging.png

I found there’s a similar post but looks like not being solved.
post

This is my worker script.

export default {
  async fetch(request, env) {

    let url = new URL(request.url);

    const config = {
      width: url.searchParams.get("w"),
      height: url.searchParams.get("h"),
      quality: url.searchParams.get("q"),
      fit: url.searchParams.get("fit"),
    };

    const configPath = Object.entries(config)
      .filter((entry) => Boolean(entry[1]))
      .map((entry) => `${entry[0]}=${entry[1]}`)
      .join(",");

    const imageURL = configPath.length 
     ? `https://www.istaging.com/cdn-cgi/image/${configPath}/https://storage-dev.istaging.com${url.pathname}`
     : `https://storage-dev.istaging.com${url.pathname}`;

    return fetch(imageURL);
  },
};

Thanks for any help!

4

The storage-dev.istaging.com is an A record point to google cloud load balancer ip.
And the cloud load balancer route the traffic to google cloud stroage.

5

AFAIK, you cannot use the /cdn-cgi/image/<config>/<url> endpoint in Workers subrequests to resize images. You have to use the cf.image request properties instead.

const response = await fetch('https://example.com/image.png', {
  cf: {
    image: {
      fit: 'scale-down',
      width: 800,
      height: 600
    }
  }
})
1 Like
6

Thanks, @albert , I’ve tried to use fetch with cf before and met 502.
I opened another topic here.