javascript - 使用新 URL 使用 Vite 提供开发中的静态图像

Question

我目前有一个带有 Vite 2.7.1 的 React 应用程序。我在开发过程中无法在 Vite 中显示静态本地图像。这在生产中有效。

我在用着：

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

我试过了：

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

然后我会像这样消费它：

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

我不知道这是否是文件服务器问题，但它确实正确映射了地址！

这是我的 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'` },
});

笔记。Vite 当前配置为使用 NX CLI 提供的 monorepo 方式。