CD
Cloudflare Developers•2mo ago
bearly

Cloudflare Images error in Firefox: Bad character in percent-encoded string: 44 (0x2C)

Hello. I am using Cloudflare images in Next.js and in the last few days I have started getting 400 errors in Firefox (it happens sometimes in Chrome too but rarely). Specifically the error is:
Bad character in percent-encoded string: 44 (0x2C)
I am pretty much following the documentation. This is my implementation. It seems that it does not like the comma. I have tried using %2C but it did not fix the problem. Does anybody have any suggestions? 
"use client"

import type { ImageLoaderProps } from "next/image"

export default function cloudflareLoader({
    src,
    width,
    quality,
}: ImageLoaderProps) {
    const urlObj = new URL(src)
    const params = [`width=${width}`, `quality=${quality || 75}`, `format=auto`]
    const paramsString = params.join(",")

    return `${urlObj.origin}/cdn-cgi/image/${paramsString}${urlObj.pathname}`
}
"use client"

import type { ImageLoaderProps } from "next/image"

export default function cloudflareLoader({
    src,
    width,
    quality,
}: ImageLoaderProps) {
    const urlObj = new URL(src)
    const params = [`width=${width}`, `quality=${quality || 75}`, `format=auto`]
    const paramsString = params.join(",")

    return `${urlObj.origin}/cdn-cgi/image/${paramsString}${urlObj.pathname}`
}
1 Reply
bearly
bearlyOP•2mo ago
For anybody else who finds this. I fixed the problem by creating a Cloudflare worker that changes the final URL of the images. It takes the Cloudflare Image options as query params and returns the optimized image. This way no commas reach the browser.

Did you find this page helpful?