我目前有一个带有 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 方式。