React项目中图片无法显示求助（无报错）

以下是针对你遇到的问题的具体排查步骤和修正方案：

1. 核对文件路径与项目结构 #

• src目录内图片的情况：
  确认图片文件的位置与组件的相对路径是否匹配。比如你的Navbar组件如果在src/components/Navbar.js，而图片在src/images/earth-icon.png，那么import路径应该是../images/earth-icon.png（注意层级关系）。另外，React项目对文件名大小写敏感，要确保图片文件名（比如earth-icon.png）和代码里的完全一致。

• public目录内图片的情况：
  public文件夹是项目的静态资源根目录，所以图片路径要从根开始写，不能用相对路径./。正确的写法是/images/earth-icon.png，而非./images/earth-icon.png。

2. 验证import方式的有效性 #

当使用import方式引入src内的图片时，可以在组件里打印导入的路径，确认是否正确：

import React from "react";
import img1 from '../images/earth-icon.png'; // 根据实际路径调整

export default function Navbar() {
    console.log(img1); // 在浏览器控制台查看输出的资源路径是否正确
    return(
        <div className="header">
            <h2 className="title">My Travel</h2>
            <img src={img1} alt="cam" />
        </div>
    )
}

如果控制台输出的是正确的编译后路径（比如base64字符串或带哈希的URL），说明路径没问题，否则就是路径写错了。

3. 修正public目录图片的引用代码 #

如果图片放在public/images/earth-icon.png，直接使用根路径引用即可：

import React from "react";

export default function Navbar() {
    return(
        <div className="header">
            <h2 className="title">My Travel</h2>
            <img src="/images/earth-icon.png" alt="cam" />
        </div>
    )
}

4. 清除缓存并重新构建 #

有时候开发环境的缓存会导致资源加载异常，你可以：

• 停止开发服务，删除项目根目录下的node_modules/.cache文件夹（create-react-app默认缓存目录）
• 重新执行npm start启动服务

5. 检查图片文件本身 #

确认图片文件没有损坏：可以直接在本地打开图片文件，或者替换成一张已知可用的测试图片，看是否能正常显示，排除文件本身的问题。

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