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" }
});
}
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
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.
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.
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?