React项目中public文件夹图片无法显示问题求助

常见问题及修复方案 #

1. 图片路径引用错误 #

React中public文件夹是静态资源根目录，引用时必须以斜杠/开头，表示从public根目录开始查找：

• 正确写法：src="/images/burger.jpg"（假设图片在public/images/burger.jpg）
• 错误写法：src="./images/burger.jpg"（相对路径会基于组件所在目录查找，而非public）

如果你的组件代码里用了相对路径，直接改成根路径开头的写法即可。

2. 文件名/路径大小写不匹配 #

Linux、macOS系统区分文件名大小写，Windows不区分。如果你的图片实际叫CheeseBurger.jpg，但代码里写的是cheeseburger.jpg，就会返回404。

• 检查代码中的文件名和public文件夹里的实际文件名完全一致，包括大小写。

3. package.json中homepage配置影响路径 #

如果你的package.json里配置了homepage字段（比如部署到子目录时），图片路径需要加上homepage的前缀：

• 比如homepage设置为"homepage": "/my-menu-app"，图片src要写成src="/my-menu-app/images/burger.jpg"
• 如果是本地开发，可临时注释掉homepage字段测试是否正常显示。

4. 检查网络请求的实际路径 #

对照你提供的网络请求截图，确认请求的URL：

• 如果返回404，说明请求路径和文件实际位置不匹配，对照public文件夹的结构修正路径
• 如果请求路径正确但仍无法显示，检查图片文件是否损坏，尝试替换一张确认正常的图片测试

代码示例修正 #

假设你的Menu组件原本是这样写的：

// 错误写法
const MenuItem = () => {
  return <img src="./images/burger.jpg" alt="Burger" />;
};

改成根路径开头的正确写法：

// 正确写法
const MenuItem = () => {
  return <img src="/images/burger.jpg" alt="Burger" />;
};

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