React 中图片无法显示通常是因为路径错误，尤其是混淆了相对路径与 public 目录下的绝对路径；将图片放入 public/images 并使用以 / 开头的路径（如 /images/airbnb1.png）才能被浏览器正确解析。
react 中图片无法显示通常是因为路径错误，尤其是混淆了相对路径与 public 目录下的绝对路径；将图片放入 public/images 并使用以 / 开头的路径（如 `/images/airbnb1.png`）才能被浏览器正确解析。
在 React 项目中，图片资源的加载路径规则与普通 HTML 或前端静态项目不同——关键在于区分 模块导入路径 和 浏览器请求路径。你当前的写法 <img src="../images/airbnb1.png" /> 是一个相对路径，它会被浏览器尝试从当前页面 URL（如 http://localhost:3000/）基础上拼接，最终请求 http://localhost:3000/../images/airbnb1.png，这显然无效，且不会报错（HTTP 404 静默失败），导致图片空白。
✅ 正确做法是：将图片文件放入 public/ 目录下（例如 public/images/airbnb1.png），然后在 JSX 中使用以斜杠 / 开头的绝对路径：
function Navbar() {
return (
<nav>
<img src="/images/airbnb1.png" alt="Airbnb logo" className="nav--logo" />
</nav>
);
}⚠️ 注意事项：
public/ 目录下的资源是“静态可公开访问”的，Webpack 不会处理它们，而是直接映射到根路径（/）。因此 /images/airbnb1.png 对应的就是 public/images/airbnb1.png。
不要将图片放在 src/ 下再用相对路径引用（如 ../images/...），除非你通过 import 显式导入（见下文备选方案）。
-
若坚持把图片放在 src/images/，则必须用 ES 模块方式导入：
import airbnbLogo from '../images/airbnb1.png'; // ✅ 正确：让 Webpack 处理并返回最终 public 路径 function Navbar() { return <img src={airbnbLogo} alt="Airbnb logo" className="nav--logo" />; }此时 src 是一个由 Webpack 注入的字符串（如 /static/media/airbnb1.abc123.png），具备哈希和 CDN 友好性。
? 总结：初学者推荐统一使用 public/images/xxx.png + /images/xxx.png 的组合，简单可靠；进阶项目建议用 import 方式管理图片，便于优化、类型检查和构建时校验。路径错误不报错，但图片必不显示——请优先检查浏览器开发者工具的 Network 标签页，确认图片请求是否返回 404。
