nuxt / nuxt/image

Cloudflare does not encode special characters in the URL

Open
#1,878 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

<img onerror="this.setAttribute(&#39;data-error&#39;, 1)" data-nuxt-img sizes="100vw" srcset="https://example.com/cdn-cgi/image/f=auto,w=320/images/products/fpv.jpeg 320w, https://example.com/cdn-cgi/image/f=auto,w=640/images/products/fpv.jpeg 640w" class="object-cover sm:w-52 sm:h-48" src="https://example.com/cdn-cgi/image/f=auto,w=640/images/products/fpv.jpeg">

This will call https://example.com/cdn-cgi/image/f=auto and w=320/images/products/fpv.jpeg

Comma in the srcset separates variants, so when URL containing it must be encoded like this:

https://example.com/cdn-cgi/image/f%3Dauto%2Cw%3D320/images/products/fpv.jpeg

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No file or test is named. Start by reproducing the Cloudflare provider case with the shown srcset URL and trace where the image URL is assembled or encoded. Done means URLs containing commas and other special characters are encoded without breaking srcset variant parsing; add or update coverage for this case if the existing test structure identifies a suitable location.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.