Vite adds spaces around commas in image url within srcset (HTML files)

[caseycarroll]

Describe the bug

Vite appears to add spaces around commas when a comma is present in a srcset property. This only occurs in HTML files.

If my index.html file contains

    <img 
       srcset="https://www.rei.com/dam/18160142_homepage-lead-member-rewards-xs_web_lg.jpeg?im=Resize,width=800 800w"
       src="https://www.rei.com/dam/18160142_homepage-lead-member-rewards-xs_web_lg.jpeg"
    />

Vite outputs

<img srcset="https://www.rei.com/dam/18160142_homepage-lead-member-rewards-xs_web_lg.jpeg?im=Resize , width=800 800w" src="https://www.rei.com/dam/18160142_homepage-lead-member-rewards-xs_web_lg.jpeg">

Take note of the space added to the image url around the comma in the query parameter. ?im=Resize , width=800

The browser reads width=800 as the entire image url and attempts to request /width=800 which is nonexistent.

Reproduction

Code Sandbox

Steps to reproduce

reproduceable with vite vite preview and vite build

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (6) x64 Intel(R) Core(TM) i5-8600K CPU @ 3.60GHz
    Memory: 8.79 GB / 15.93 GB
  Binaries:
    Node: 21.6.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.59)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vite: ^5.1.4 => 5.1.4

Used Package Manager

npm

Logs

Browser Logs

```shell Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at main.ts:6:49 ```

Vite Logs

```shell vite:resolve 0.64ms /width=800 -> null +5s vite:html-fallback Rewriting GET /width=800 to /index.html +228ms ```

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[caseycarroll]

I believe the bug lives in this line of splitSrcSet:

vite/packages/vite/src/node/utils.ts

Line 781 in 11cceea

splitIndex = cleanedSrcs.indexOf(',', startIndex)

I will try to make a contribution this weekend, but anyone else should feel free to jump on it.

[rarous]

Hi, this is still broken for URLs with commas in path, eg. https://res.cloudinary.com/hackercamp/image/upload/dpr_auto,f_auto,fl_progressive,q_auto,w_100/v1/www.hackercamp.cz/faq-ubytko-3?_a=BAMABmTE0

[patak-dev]

Hey @rarous, please create a new issue with a minimal reproduction so we can properly track your report

[rarous]

Ok, my case is described in #16323