使用create-react-app开发React时本地图片无法加载的问题

嘿，我来帮你排查下这个图片加载失败的问题～ 在create-react-app里加载静态资源有它特定的规则，咱们一步步来分析可能的原因：

1. 先确认文件路径是否完全正确 #

首先得搞清楚你的图片文件夹和组件文件的层级关系。比如：

• 如果你的组件在src/components/MyComponent.js，而图片在src/img/initials.jpg，那相对路径应该是../img/initials.jpg（因为要往上跳一级到src目录，再进入img文件夹），而不是./img/initials.jpg。
• 可以在编辑器里按住Ctrl（或Cmd）点击路径，看看能不能跳转到图片文件，这样就能快速验证路径是否正确。

2. 用create-react-app支持的正确方式引入图片 #

create-react-app基于webpack配置了静态资源处理，主要有两种靠谱的引入方式：

方式一：把图片放在src目录下，通过import/require引入 #

这种方式会让webpack把图片打包到构建产物里，并且自动处理路径：

// 先import图片（推荐写法）
import initialsImg from './img/initials.jpg';

function YourComponent() {
  return (
    <img 
      className="media-object" 
      width="75" 
      height="75" 
      src={initialsImg} 
      alt="用户头像缩写"
    />
  );
}

你之前用的require('./img/initials.jpg')其实也是可行的，但前提是路径必须完全正确，而且要确保图片确实在对应的位置。

方式二：把图片放在public目录下，用绝对路径访问 #

如果把图片放在项目根目录的public/img/initials.jpg，那可以直接用绝对路径引用，不需要import/require：

function YourComponent() {
  return (
    <img 
      className="media-object" 
      width="75" 
      height="75" 
      src="/img/initials.jpg" 
      alt="用户头像缩写"
    />
  );
}

注意这里的路径开头是/，代表public目录的根路径。

3. 检查文件名的大小写 #

开发环境下create-react-app可能不区分文件名大小写，但生产环境是严格区分的。比如initials.jpg和Initials.jpg会被当成两个不同的文件，一定要确保JSX里写的文件名和实际文件名完全一致。

4. 排除webpack配置问题（如果你没有eject的话可以忽略） #

如果你没有执行过npm run eject，那create-react-app默认的webpack配置已经处理好了图片加载，不用额外配置。但如果eject过，可能需要检查webpack.config.js里的file-loader或url-loader配置是否正常。

先按照上面的步骤排查，大概率是路径或者引入方式的问题，调整后应该就能正常加载图片啦～

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