如何解决Vite+React构建后assets图片未拷贝及动态加载报错问题？

核心问题分析 #

你用import()加载图片的方式是错误的——import()是用来加载JavaScript模块的，浏览器把图片文件当成JS模块请求，自然会触发MIME类型不匹配的报错；同时这种错误的引用方式也导致Vite在构建时没正确识别并拷贝图片资源到assets目录。

解决方案步骤 #

1. 替换动态图片加载方式

把原来用import()加载图片的逻辑，换成Vite官方推荐的new URL()方式，让Vite正确处理静态资源路径：

const CardWrapper = ({ company, setConditions }) => {
    
    const [imageSrc, setImageSrc] = useState(null);
    
    useEffect(() => {
        const loadImage = () => {
            try {
                // 用new URL处理动态图片路径，Vite会自动解析并构建资源
                const imageUrl = new URL(`../../assets/images/${company.logo}`, import.meta.url).href;
                setImageSrc(imageUrl);
            } catch (error) {
                console.error('Error loading image:', error);
            }
        };

        loadImage();
    }, [company.logo]);
    
    // 后续渲染image标签时直接用imageSrc即可
    // <img src={imageSrc} alt={company.name} />
}

2. 优化Vite配置（可选但更稳妥）

虽然assetsInclude: ['src/assets/**']理论上能覆盖所有资源，但可以明确指定图片类型，避免Vite遗漏：

// vite.config.js
export default defineConfig({
  base: '/jobfilters/',
  build: {
    assetsInclude: ['**/*.svg', '**/*.png', '**/*.jpg'] // 列出你用到的所有图片格式
  },
  plugins: [react()]  
})

3. 重新构建测试

执行npm run build，然后检查dist/jobfilters/assets目录，应该能看到被正确拷贝的图片文件了；本地预览可以用npx serve dist验证是否还有报错。

内容的提问来源于stack exchange，提问作者daniel sas