Skip to content

On devserver public files cannot be loaded if they contain special url characters like # #20799

@otgerrogla

Description

@otgerrogla

Describe the bug

I'm trying to load files from the public folder containing special url characters like # and ?. While running the app using the dev-server they are not resolved correctly and a "404 Not Found" status is issued.

For instance, trying to load an image at public/my#image.svg with a percent-encoded relative URI like <img src="my%23image.svg" /> fails.
It can't be loaded either with <img src="my#image.svg" /> because then the hash is interpreted as the URL fragment, so there's no way to load the image.

Reproduction

https://stackblitz.com/edit/vitejs-vite-yyarjv8i

Steps to reproduce

Run the repro in devserver mode, and look at the index.html file and its rendered output:

  • The red .svg image (without any special character) loads correctly.
  • The green and yellow images (containing a # and ? in the filename respectively) don't load and return a 404 not found, where they should load. The devserver doesn't resolve their percent-encoded URIs correctly.
  • The blue image (whose filename contains %23) loads correctly when writing in the img src %2523(the percent-encoding of %23), but also if writing %23. So it looks like the devserver resolves the %25 to the character % correctly, but not the %23 to #.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vite: ^7.1.6 => 7.1.6

Used Package Manager

npm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions