React项目图片无法在浏览器加载怎么办？图片存于src目录

当图片放在src目录下时，直接写开发时的相对路径在打包后会失效，因为React项目构建时会重新处理资源路径，推荐用以下两种方式加载：

方法一：import导入图片 #

先在组件文件顶部导入图片资源，再将导入的变量作为img的src值：

import logo from './comp/images/logo.png'; // 路径根据当前组件的位置调整

<a href="/" className="logo">
  <img src={logo} alt="logo" />
</a>

方法二：使用require动态加载 #

如果需要动态指定图片路径，可使用require语法：

<a href="/" className="logo">
  <img src={require('../src/comp/images/logo.png').default} alt="logo" />
</a>

注意：require的路径要根据当前组件文件的位置准确填写，确保层级对应正确。

原写法失效的原因 #

React项目构建时，会对src目录下的资源进行打包编译，资源最终的部署路径和开发时的相对路径完全不同。直接写../src/comp/images/logo.png这类路径，浏览器无法定位到打包后的资源文件，因此无法渲染图片。

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