Image resizing worker not working

Hi,

I am having issues resizing images with my worker. I am on the business plan. I run our site images through our worker, which I have confirmed works, and now I am trying to implement resizing - the params are passing properly, but the image does not seem to change. Here is my worker:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

const errNoFallback = "<h1>Not found</h1><p>Request failed, specify fallback= to fallback</p>"
const errNoUrl = "<h1>Not found</h1><p>Specify url= to query a url</p>"

/**
 * Fetch querystring from the request.
 * @param {Request} request
 */
function query(request) {
  const result = {};
  const q = request.url.split("?")[1] || "";
  const vars = q.split('&');
  for (let i = 0; i < vars.length; i++) {
    const pair = vars[i].split('=');
    result[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
  }
  return result;
}

/**
 * Respond to the request
 * @param {Request} request
 */
async function handleRequest(request) {

  const q = query(request);

  if (!q.url) {
    return new Response(errNoUrl, { 
      status: 404, 
      headers: { "content-type": "text/html" }
    });
  }
  
  try {
    const resp = await fetch(q.url, { cf: { cacheEverything: true, image: { width: q.width, height: q.height, fit: q.fit, format: q.format } } });
    if (resp.status === 200) {
      // Cache for one month in browser.
      resp.headers["cache-control"] = "max-age=2628000, public";
      return resp;
    }
  } catch (err) {
    // Ignore failure.
  }
  if (q.fallback) {
    return fetch(q.fallback, { cf: { cacheEverything: true } });
  }
  return new Response(errNoFallback, { 
    status: 404, 
    headers: { "content-type": "text/html" }
  });
}

Any thoughts would be appreciated. Thanks

Are you sure it actually enters the right branch and calls fetch() with cf.image? Can you provide a sample link?

Also, unrelated to the issue itself, you do not necessarily need the query() function. You could simply wrap the URL into a URL object and then use its searchParams object to access the query string

new URL(request.url).searchParams

Hi Sandro,

Thanks for your response. Here is a sample link:

https://images.vinnauto.workers.dev?fallback=https%3A%2F%2Fcdn.vinnauto.com%2Fassets%2Fimages%2Fcoming_soon.png&fit=cover&format=webp&height=150&url=https%3A%2F%2Fcdn-ds.com%2Fstock%2F2020-Hyundai-Veloster-Turbo-Auto-w-Two-Tone-Paint-Victoria-BC%2Fseo%2FECL12822-KMHTH6AB4LU021600%2Fsz_94520%2Fw_640%2Fh_480%2Ffd21278ba59a4e28f8f5c25268e7ee80.jpg&width=215

The image does not seem to have a cf-resized header - I have no other workers that would conflict with this though.

Thank you for the tip on the query() function. I will refactor when I resolve this initial issue

That would probably not be on the Business plan and hence not have the resizing functionality. You’d need to map the worker to a URL of the domain which is on the Business plan.

I do have the business plan, I recently upgraded, would I have to change anything in my worker after upgrading?

The Business plan applies to the domain for which you activated it and Worker scripts running under its context would be able to use resizing. You are using the generic Worker URL in this case, where resizing presumably wont be available.

Oh gotcha, thanks for you help, I will change that

After setting a new route (set to match all requests), cleared cache, and I still am not seeing my cf-resized header. Is there anything else that could impact why this isn’t showing up?

Whats the new URL?

*.vinnauto.com/*

And vinnauto.com is on aformentioned Business plan?

The following URL does seem to return an image

https://www.vinnauto.com/?fallback=https%3A%2F%2Fcdn.vinnauto.com%2Fassets%2Fimages%2Fcoming_soon.png&fit=cover&format=webp&height=150&url=https%3A%2F%2Fcdn-ds.com%2Fstock%2F2020-Hyundai-Veloster-Turbo-Auto-w-Two-Tone-Paint-Victoria-BC%2Fseo%2FECL12822-KMHTH6AB4LU021600%2Fsz_94520%2Fw_640%2Fh_480%2Ffd21278ba59a4e28f8f5c25268e7ee80.jpg&width=215

This brings us back to my original question

Did you debug the script and did you confirm the fetch() with the image object is called?

https://developers.cloudflare.com/images/errors/ might also provide some details.

Found the issue, my worker script was not pointing to the proper path. Thanks for pointing me to this, greatly appreciated