Next.js image srcset with Cloudinary is wrong

Support
1

I recently deployed a new Next.js site and decided to use Cloudinary for the image handling.

He’s how I use my loader.

function cloudinaryLoader({src, width, quality = 90}: CloudinaryLoaderProps) {
  return `${CLOUDINARY_URL}/w_${width},q_${quality},f_webp${src}`;
}

export function CloudinaryImage({
  src,
  alt,
  width,
  height,
  title,
  className,
  blurDataURL,
  quality,
}: CloudinaryImageProps) {
  return (
    <Image
      quality={quality}
      src={src}
      loader={cloudinaryLoader}
      alt={alt}
      title={title}
      width={width}
      height={height}
      className={className}
      {...(blurDataURL ? {placeholder: 'blur', blurDataURL: blurDataURL} : {})}
    />
  );
}

I noticed that the generated srcset is incorrect. You’ll see that in the first line the Cloudinary properties separated by comma (,) are split, treated as different strings

Screen Shot 2022-11-09 at 1.48.33 AM

You can check any image here Blog | Dimitrios Lytras

Any ideas?

2

Fixed with encoding the commas (%2c). For anyone reading this you might have to add the f_X properties first.

1 Like
3

Hi @dnlytras, thanks for sharing how you were able to resolve the problem.

1 Like