React应用构建版本部分图片无法加载，本地开发环境运行正常

• 图片文件名包含空格或特殊字符：你代码中引入的Word Index.png文件名带有空格，开发环境的开发服务会自动转义路径，但生产构建环节打包工具的资源命名转义规则不匹配，会导致路径404，这是该场景下最高概率的触发原因。
• 生产环境publicPath配置错误：如果项目部署在站点二级路径下，未正确配置打包工具的publicPath参数，会导致静态资源路径拼接错误。
• 图片大小触发资源嵌入规则：Create React App等框架默认会将小于10kb的图片转成base64嵌入代码，超过阈值的图片会单独打包到static/media目录，路径配置错误会导致这部分单独打包的图片无法加载。

1. 修正资源文件名
   将所有图片文件名中的空格、中文、特殊符号全部替换为下划线或短横线，比如将Word Index.png重命名为word_index.png，同步修改import路径即可：

// 修改前
import wordIndexImage from "./projectsImage/Word Index.png";
// 修改后
import wordIndexImage from "./projectsImage/word_index.png";

2. 调整publicPath配置
   如果是Create React App搭建的项目，在package.json中新增homepage配置：

{
  "homepage": "."
}

该配置会让打包后的资源默认使用相对路径，适配根路径、二级路径等各类部署场景。如果是自定义webpack配置的项目，修改output.publicPath为'./'即可。

3. 调整资源存放路径（备选方案）
   如果上述方案无效，可以将所有项目图片迁移到项目根目录的public文件夹下，比如存放到public/projectsImage目录，代码中无需import，直接用路径引用即可：

export const products = [
  {
    id: 2,
    title: "Word Index",
    img: "/projectsImage/word_index.png",
    // 其余配置保持不变
  }
]

public目录下的资源打包时会直接原封不动复制到输出目录，不会被webpack处理路径，可彻底规避路径转义问题。

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