ReactJS本地yarn start可显示图片，yarn build后无法加载

问题现象 #

• 本地yarn start开发环境中图片渲染正常，但build部署版本里，目标图片的Content-Type被识别为text/html
• 图片路径确认正确，文件同时存在于项目public目录和构建生成的build目录中
• 仅Unit7相关页面的该图片出现异常，其余页面同类型图片均正常显示，代码中无针对单元的特殊区分逻辑

图片渲染代码如下：

exerciseKey ? (
          <img
            src={exerciseKey}
            alt="..."
            style={{ paddingTop: 25, paddingRight: 10 }}
          />
        ) : (
          <div className="mt-5 d-flex justify-content-center text-info display-3">
            Students’ own answers
          </div>
        )

exerciseKey示例值："img/FriendsPlus/Page49/Key/E1answerKey.png"

已尝试的排查方案 #

• 切换使用npm build、yarn build执行构建
• 将项目部署至另一台Nginx环境的VPS（原部署环境为Firebase）
• 构建前手动清空build文件夹
• 在另一台电脑上重新执行构建流程
• 在图片路径前添加${process.env.PUBLIC_URL}前缀

以上方案均未解决问题。

最终解决方法 #

问题根源是路径拼写错误：本地开发使用Windows系统，其文件系统不区分大小写，因此路径大小写不匹配时仍能正常加载图片；但部署环境（Firebase、Nginx多基于Linux系统）的文件系统严格区分大小写，导致实际无法找到对应图片，服务器返回404页面（Content-Type为text/html），进而引发图片显示异常。修正路径拼写的大小写后问题解决。

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