Skip to content

srcset with base64 value is mangled on build #15419

@elringus

Description

@elringus

Describe the bug

Consider following html:

<img srcset="data:image/avif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFUlEQVR42mNk+M9Qz0AEYBxVSF+FAAhKDveksOjmAAAAAElFTkSuQmCC" />

When built with Vite (in both dev and build, w/o any plugins or JS, just static HTML build), output html is:

<img srcset="data:image/avif;base64 , iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFUlEQVR42mNk+M9Qz0AEYBxVSF+FAAhKDveksOjmAAAAAElFTkSuQmCC " />

Notice added spaces around comma and at the end of the srcset value.

Reproduction

https://stackblitz.com/edit/vitejs-vite-yvgacv?file=index.html

Steps to reproduce

  1. Open the repro on stackblitz, it'll automatically run vite dev
  2. Notice the image is not rendered due to malformed srcset value
  3. Exit vite dev and run npx serve
  4. Notice the image is rendered correctly

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Core(TM) i7-6900K CPU @ 3.20GHz
    Memory: 48.15 GB / 63.92 GB
  Binaries:
    Node: 21.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.6.6 - C:\Program Files\nodejs\npm.CMD
    pnpm: 7.29.3 - C:\ProgramData\chocolatey\bin\pnpm.EXE
  Browsers:
    Chrome: 120.0.6099.111
    Edge: Chromium (120.0.2210.91)

Used Package Manager

npm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions