Got wrong url when importing some svg files about vite HOT 5 OPEN

t

1: maybe a assetsInlineLimit function config is enough

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

2: not sure about this +_+

from vite.

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

from vite.

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
}

from vite.

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.

from vite.

@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.

from vite.