为何assets文件夹内的图片仅在src文件夹外时才能显示？

以下是导致这种现象的常见原因，分场景说明：

1. Create React App（CRA）项目的默认规则限制 #

CRA的默认webpack配置有明确的资源处理逻辑：

• 放在public目录（src同级）下的assets会被直接复制到构建后的build文件夹根目录，无需通过import引入，直接用绝对路径（比如<img src="/assets/photo.png" />）就能访问。
• 如果把assets放在src目录内，必须通过ES模块导入的方式引用：

  import photo from './assets/photo.png';
  // 然后在组件中使用
  <img src={photo} alt="示例图片" />
  

  要是直接用相对/绝对路径引用src内的assets，webpack不会对这些资源进行打包处理，构建后路径会失效，图片自然加载不出来。
• 若你在src外非public目录的assets也能正常访问，大概率是通过craco、react-app-rewired等工具修改了webpack配置，添加了额外的资源解析目录。

2. 自定义Webpack配置的项目存在配置遗漏 #

如果是自己搭建的React项目，问题通常出在webpack配置上：

• 未在module.rules中配置图片等静态资源的处理规则（比如未使用asset/resource、file-loader等），导致src内的assets无法被webpack识别和打包。
• src外的assets可能被配置了copy-webpack-plugin，会被直接复制到构建产物目录，所以能通过路径访问；或者webpack的resolve.modules中包含了该src外目录，资源可以被正确解析。

3. 资源引用路径错误 #

当assets在src内时，你可能用了错误的相对路径。比如组件嵌套层级较深时，../assets/photo.png这种相对路径会指向错误的位置；而src外的assets用了绝对路径（/assets/photo.png），刚好匹配构建后的资源位置，所以能正常显示。

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