ReactJS项目图片路径使用问题：图片加载失败求助

• 导入图片后引用（推荐）
  在Test1.js中先导入图片资源，再通过变量引用：

import logo from '../logo-001.png';

function Test1() {
  return <img src={logo} alt="网站logo" />;
}

export default Test1;

React项目中通过ES6导入方式引入图片，webpack会自动处理资源路径，打包后能确保图片正常加载。

• 利用public文件夹存放静态图片
  如果不想使用导入方式，可在项目根目录新建public文件夹，把logo-001.png放进去，然后用绝对路径引用：

<img src="/logo-001.png" alt="网站logo" />

这种方式下图片不会被webpack打包，直接作为静态资源被访问。

• 排查路径与打包配置问题
  你当前写的../logo-001.png路径本身是正确的，但在create-react-app这类脚手架创建的项目中，直接写相对路径的图片不会被webpack处理，打包后路径会失效，因此不建议直接使用这种写法。

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