Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Got wrong url when importing some svg files #18034

Closed
7 tasks done
hungtcs opened this issue Sep 5, 2024 · 7 comments · Fixed by #18581
Closed
7 tasks done

Got wrong url when importing some svg files #18034

hungtcs opened this issue Sep 5, 2024 · 7 comments · Fixed by #18581
Labels
p3-minor-bug An edge case that only affects very specific usage (priority)

Comments

@hungtcs
Copy link

hungtcs commented Sep 5, 2024

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 git@github.com: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

@PengBoUESTC
Copy link
Contributor

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

@hungtcs
Copy link
Author

hungtcs commented Sep 6, 2024

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
Copy link
Contributor

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
Copy link
Author

hungtcs commented Sep 6, 2024

@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
Copy link
Contributor

t

1: maybe a assetsInlineLimit function config is enough

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

2: not sure about this +_+

@codethief
Copy link

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 hi-ogawa added p3-minor-bug An edge case that only affects very specific usage (priority) and removed pending triage labels Oct 26, 2024
@hi-ogawa
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants