Actualmente tengo una aplicación React con Vite 2.7.1. Tengo problemas para mostrar imágenes locales estáticas en Vite durante el desarrollo . Esto funciona en producción .

Estoy usando:

 new URL(path, import.meta.url);

Y he probado:

 new URL(path, import.meta.url).href;

Entonces lo consumiría como:

 const wavesBg = new URL( '../../../../resources/images/background-waves.svg', import.meta.url ); <img src={wavesBg } />

No sé si se trata de un problema del servidor de archivos, ¡pero asigna la dirección correctamente!

Aquí está mi archivo vite.config.ts:

 export default defineConfig({ plugins: [ viteCommonjs(), // https://www.npmjs.com/package/@vitejs/plugin-react react(), tsconfigPaths(), eslintPlugin(), ], resolve: { alias: { stream: 'stream-browserify', '~': path.resolve(__dirname, 'src'), }, }, server: { open: true, fs: { allow: [ // https://vitejs.dev/config/#server-fs-allow searchForWorkspaceRoot(process.cwd()), // This is where I'm serving my images. '/libs/components/src/resources/images', ], }, }, optimizeDeps: { /// Omitted }, // esbuild: { jsxInject: `import React from 'react'` }, });

Nota. Actualmente, Vite está configurado de manera monorepo y se sirve mediante la CLI de NX.