React组件在不同渲染场景下图片加载失败问题排查

问题描述 #

我正在开发一个任务分配React应用，这是我的第一个React项目。同一个包含图片的组件在任务列表页面能正常渲染图片，但在用户组件中使用时图片加载失败。图片存放在public文件夹，已添加对应CSS。

相关代码如下：

<div className="tasklist">
  <p>{props.task.task}</p>
  <small>{new Date(props.task.createdAt.toString()).toDateString()}</small>
  <br />
  <i>Assigned By :</i>
  <b>{props.task.assigned_by}</b>
  <br />
  <i>Assigned to :</i>
  <b>{props.task.assigned_to}</b>
  <br />
  <i>status :</i>
  <b>{props.task.status}</b>
  <button onClick={showUpdateFormhandler}>
    <img
      onError={()=>{console.log('error occured')}}
      src="edittask.png"
      alt="update"
      style={{ width: "20px", height: "20px" }}
    />
  </button>
</div>

问题原因 #

在React中，组件被不同路由/页面引用时，相对路径的解析基准会随当前页面路由变化。直接用"edittask.png"这种相对路径，若用户组件所在路由为/users，浏览器会请求/users/edittask.png，而非public文件夹根目录下的/edittask.png，导致图片找不到。

解决方法 #

方法一：使用根绝对路径 #

将图片src改为以斜杠开头的绝对路径，强制指向public文件夹根目录：

<img
  onError={()=>{console.log('error occured')}}
  src="/edittask.png"
  alt="update"
  style={{ width: "20px", height: "20px" }}
/>

方法二：通过环境变量拼接路径 #

使用process.env.PUBLIC_URL确保路径始终指向public文件夹（适用于部署到非根目录的场景）：

<img
  onError={()=>{console.log('error occured')}}
  src={process.env.PUBLIC_URL + "/edittask.png"}
  alt="update"
  style={{ width: "20px", height: "20px" }}
/>

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