Got wrong url when importing some svg files

[hungtcs]

Describe the bug

This problem only occurs in prod mode.

There are two svg files in reproduction that are imported in the same way, but get different results

import url_01_url from "./assets/01.svg?url";
import url_02_url from "./assets/02.svg?url";

01: /assets/01-CAOkh7Dq.svg
02: data:image/svg+xml,%3csvg%20xmlns='http://www.

Reproduction

https://github.com/hungtcs/vite-svg-assets-reproduction/blob/master/src/main.tsx

Steps to reproduce

git clone [email protected]:hungtcs/vite-svg-assets-reproduction.git
cd vite-svg-assets-reproduction
pnpm run build
pnpm run preview

System Info

System:
  OS: macOS 14.6.1
  CPU: (8) arm64 Apple M3
  Memory: 67.17 MB / 24.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 22.6.0 - ~/.local/state/fnm_multishells/17635_1725528034762/bin/node
  npm: 10.8.2 - ~/.local/state/fnm_multishells/17635_1725528034762/bin/npm
  pnpm: 9.7.0 - ~/.local/state/fnm_multishells/17635_1725528034762/bin/pnpm
  bun: 1.1.25 - /opt/homebrew/bin/bun
Browsers:
  Chrome: 128.0.6613.119
  Safari: 17.6
npmPackages:
  @vitejs/plugin-react: ^4.3.1 => 4.3.1 
  vite: ^5.4.1 => 5.4.3

Used Package Manager

pnpm

Logs

No response

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.

[PengBoUESTC]

There is a config about img convert assetsInlineLimit
https://vitejs.dev/config/build-options.html#build-assetsinlinelimit

[hungtcs]

There is a config about img convert assetsInlineLimit https://vitejs.dev/config/build-options.html#build-assetsinlinelimit

Thanks @PengBoUESTC It is indeed related to this configuration, setting to 0 solves the problem.

---

But what puzzles me is that I found 3 parameters for importing files in client.d.ts, and there is no description of the ?inline parameter in the documentation, and using it has no effect.

For some files, I want to explicitly import them using inline or url, instead of automatically processing it by size.

The other side is that this behavior is not uniform in dev mode and prod mode, which can lead to issues that are difficult to troubleshoot in dev mode and are only discovered after going prod.

declare module '*?raw' {
  const src: string
  export default src
}

declare module '*?url' {
  const src: string
  export default src
}

declare module '*?inline' {
  const src: string
  export default src
}

[PengBoUESTC]

There is a config about img convert assetsInlineLimit https://vitejs.dev/config/build-options.html#build-assetsinlinelimit

Thanks @PengBoUESTC It is indeed related to this configuration, setting to 0 solves the problem.

But what puzzles me is that I found 3 parameters for importing files in client.d.ts, and there is no description of the ?inline parameter in the documentation, and using it has no effect.

For some files, I want to explicitly import them using inline or url, instead of automatically processing it by size.

The other side is that this behavior is not uniform in dev mode and prod mode, which can lead to issues that are difficult to troubleshoot in dev mode and are only discovered after going prod.

declare module '*?raw' {
  const src: string
  export default src
}

declare module '*?url' {
  const src: string
  export default src
}

declare module '*?inline' {
  const src: string
  export default src
}

first of all : there is a default assets file test about filetoURL

assetsInclude(file: string) {
      return DEFAULT_ASSETS_RE.test(file) || assetsFilter(file)
    }

so that if u didn't use url query, the svg will be compiled by vite:asset plugin too,

and then , I notice that vite handle the file in different way

export async function fileToUrl(
  id: string,
  config: ResolvedConfig,
  ctx: PluginContext,
): Promise<string> {
  if (config.command === 'serve') {
    return fileToDevUrl(id, config)
  } else {
    return fileToBuiltUrl(id, config, ctx)
  }
}

last, I think that Base64 url is a kind of url, the difference is file compiled or not.

[hungtcs]

@PengBoUESTC I totally agree with you that Data URLs are also a type of URLs. Now there are only two final questions:

1. Is it possible to explicitly specify whether the type of import is a dataurl or a regular url? (there are always some people who have some strange needs).
2. Is it possible to get consistent behavior in dev and prod modes?

So far assetsInlineLimit solves my problem, and the above is what I think could be taken a step further.

[PengBoUESTC]

t

1: maybe a assetsInlineLimit function config is enough

    assetsInlineLimit: (id) => {
      return id.includes('01')
    }

2: not sure about this +_+

[codethief]

I'm facing the same issues of Vite inlining SVGs that are imported as ?url.

I think that Base64 url is a kind of url

Kind of, yes, but it is not universally usable (e.g. you can't plug it into <a href="…"> or <svg><use href="…" /></svg>). So I'd argue the current behavior is a bug: A file imported with a ?url suffix should never be inlined and always result in a normal (http) URL.

[hi-ogawa]

2. Is it possible to get consistent behavior in dev and prod modes?

This inconsistency is not ideal and svg especially seems to have an issue #14815, so we decided to bring svg inlining during dev as well for consistency.

A file imported with a ?url suffix should never be inlined and always result in a normal (http) URL.

For this, there's a PR to disable inline using a new query #15454