I currently have a React App with Vite 2.7.1. I'm having trouble displaying static local images in Vite while in development.This works in production.

I'm using:

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

And I've tried:

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

Then I'd consume it like:

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

I don't know if this is a file server problem, but it does map the address correctly!

Here's my vite.config.ts file:

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'` },
});

Note. Vite is currently configured in a monorepo fashion served using the NX CLI.