React项目中Vite无法导入JPG图片的原因及解决方法

报错原因 #

• 大小写不匹配：构建工具（如Vite）默认的静态资产规则通常只识别小写的.jpg后缀，如果你导入的是大写.JPG的图片，工具会误将其当作JS文件解析，从而抛出语法错误。
• 默认配置未覆盖该格式：部分构建工具默认仅将png、svg等格式列为静态资产，未包含JPG（尤其是大写后缀的），导致无法正确识别处理。

解决办法 #

1. 统一后缀大小写（最简单方案） #

把图片文件名改成小写.jpg，同时导入语句里也使用小写后缀：

import banner from './assets/banner.jpg'

这样能直接适配工具的默认规则，无需修改配置。

2. 修改构建工具的assetsInclude配置 #

如果必须保留大写.JPG后缀，编辑项目的构建配置文件（以Vite为例，修改vite.config.js），将所有大小写的JPG格式加入静态资产列表：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  assetsInclude: ['**/*.jpg', '**/*.JPG']
})

配置后，工具会自动把这些格式的文件当作静态资源处理，不再尝试解析成JS代码。

3. 检查图片处理插件（罕见情况） #

如果前两种方法无效，可能是构建工具缺少图片处理插件，但因为你能正常导入png/svg，这种情况概率极低。若确需插件，可根据使用的工具（如Webpack/Vite）安装对应图片处理插件，但优先推荐前两种方案。

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