srcset and image-set's assets are not imported #2177
Description
- Read the docs.
- Use Vite >=2.0. (1.x is no longer supported)
- If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.
Describe the bug
When referencing assets from an srcset attribute of img tags or from the image-set property, the image url is not transformed.
With this file :
<!-- index.html -->
<img src="./image-test.jpeg" srcset="./image-test.jpeg 1x, ./image-test.jpeg 2x">We have :
<!-- dist/index.html -->
<img src="/assets/image-test.661b3be4.jpeg" srcset="./image-test.jpeg 1x, ./image-test.jpeg 2x">
We should have:
<!-- dist/index.html -->
<img src="/assets/image-test.661b3be4.jpeg" srcset="/assets/image-test.661b3be4.jpeg 1x, /assets/image-test.661b3be4.jpeg 2x">
With this file :
// styles.css
.background-container {
background-image: image-set(
"./image-test.jpeg" 1x,
"./image-test.jpeg" 2x
);
}We have :
// dist/assets/index.245668cc.css
.background-container { background-image:image-set(
"./image-test.661b3be4.jpeg" 1x,
"./image-test.jpeg" 2x
)}We should have :
// dist/assets/index.245668cc.css
.background-container { background-image:image-set(
"/assets/image-test.661b3be4.jpeg" 1x,
"/assets/image-test.661b3be4.jpeg" 2x
)}Reproduction
git clone https://github.com/gnuletik/vite-srcset-import-playground
cd vite-srcset-import-playground
npm run build
cat dist/index.html
System Info
viteversion: [email protected]- Operating System: macOS Big Sur 11.1 (20C69)
- Node version: v15.9.0
- Package manager (npm/yarn/pnpm) and version: [email protected]
Logs (Optional if provided reproduction)
/t/vite-project ❯❯❯ npm run build
> [email protected] build
> vite build --debug
vite:config no config file found. +0ms
vite:config using resolved config: {
vite:config root: '/private/tmp/vite-project',
vite:config base: '/',
vite:config mode: 'production',
vite:config configFile: undefined,
vite:config logLevel: undefined,
vite:config clearScreen: undefined,
vite:config build: {
vite:config target: [ 'es2019', 'edge16', 'firefox60', 'chrome61', 'safari11' ],
vite:config polyfillDynamicImport: true,
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: 4096,
vite:config cssCodeSplit: true,
vite:config sourcemap: false,
vite:config rollupOptions: {},
vite:config commonjsOptions: { include: [Array], extensions: [Array] },
vite:config minify: 'terser',
vite:config terserOptions: {},
vite:config cleanCssOptions: {},
vite:config write: true,
vite:config emptyOutDir: null,
vite:config manifest: false,
vite:config lib: false,
vite:config ssr: false,
vite:config ssrManifest: false,
vite:config brotliSize: true,
vite:config chunkSizeWarningLimit: 500
vite:config },
vite:config inlineConfig: {
vite:config root: undefined,
vite:config base: undefined,
vite:config mode: undefined,
vite:config configFile: undefined,
vite:config logLevel: undefined,
vite:config clearScreen: undefined,
vite:config build: {}
vite:config },
vite:config resolve: { dedupe: undefined, alias: [ [Object] ] },
vite:config publicDir: '/private/tmp/vite-project/public',
vite:config command: 'build',
vite:config isProduction: true,
vite:config optimizeCacheDir: '/private/tmp/vite-project/node_modules/.vite',
vite:config plugins: [
vite:config 'alias',
vite:config 'vite:dynamic-import-polyfill',
vite:config 'vite:resolve',
vite:config 'vite:html',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:build-html',
vite:config 'commonjs',
vite:config 'vite:data-uri',
vite:config 'rollup-plugin-dynamic-import-variables',
vite:config 'vite:import-analysis',
vite:config 'vite:esbuild-transpile',
vite:config 'vite:terser',
vite:config 'vite:reporter'
vite:config ],
vite:config server: {},
vite:config env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
vite:config assetsInclude: [Function: assetsInclude],
vite:config logger: {
vite:config hasWarned: false,
vite:config info: [Function: info],
vite:config warn: [Function: warn],
vite:config error: [Function: error],
vite:config clearScreen: [Function: clearScreen]
vite:config },
vite:config createResolver: [Function: createResolver]
vite:config } +6ms
building for production...
✓ 4 modules transformed.
dist/assets/favicon.17e50649.svg 1.49kb
dist/assets/image-test.661b3be4.jpeg 232.20kb
dist/index.html 0.55kb
dist/assets/index.245668cc.css 0.24kb / brotli: 0.15kb
dist/assets/index.0fabbfdc.js 0.77kb / brotli: 0.37kb