React如何基于Axios获取的数据库图片路径动态显示本地图片？

React项目中，src目录下的资源会被Webpack编译处理，每个资源会生成唯一的哈希路径。你直接使用API返回的相对路径字符串时，Webpack无法识别该资源，导致图片加载失败；而文本内容不受影响，是因为它们不需要经过资源编译流程。

提供两种可行的动态加载图片方案：

方案一：将图片迁移到public目录 #

1. 在项目根目录的public文件夹下创建images/forum目录，把所有论坛图片移入该目录。
2. 修改后端API返回的bookImage字段，去掉路径前缀../，改为根路径形式，比如/images/forum/lordoftheflies.jpg。
3. 组件中直接保留原渲染逻辑即可：

<img src={forum.bookImage} height={100} width={100} alt={forum.bookName}/>

public目录下的资源不会被Webpack编译，浏览器会直接从网站根目录读取这些文件。

方案二：使用require.context动态加载src下的图片 #

如果不想移动图片位置，可以通过Webpack的require.context批量导入图片资源：

1. 在ForumComponent.js中创建图片上下文，指定要加载的目录和文件类型：

const forumImages = require.context('../images/forum', false, /\.jpg$/);

2. 渲染图片时，从API返回的路径中提取文件名，再通过上下文函数获取编译后的图片路径：

<img 
  src={forumImages(`./${forum.bookImage.split('/').pop()}`)} 
  height={100} 
  width={100} 
  alt={forum.bookName} 
/>

forum.bookImage.split('/').pop()的作用是从完整路径中提取文件名（比如从../images/forum/lordoftheflies.jpg得到lordoftheflies.jpg）。

你的原代码中useState和useEffect写在了函数组件外部，违反了React Hooks的使用规则，会导致报错。修正后的完整组件代码（以方案二为例）：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import IfCanPost from './IfCanPost';

function ForumComponent() {
  const [forums, setForums] = useState([]);
  const REST_API_URL = "你的API接口地址";
  const forumImages = require.context('../images/forum', false, /\.jpg$/);

  useEffect(() => {
    axios.get(REST_API_URL).then((response) => {
      setForums(response.data);
    });
  }, []);

  return (
    <div>
      <h2>Forum</h2>
      <table>
        <thead>
          <tr>
            <th>Book Name</th>
            <th>Book Image</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          {forums.map((forum) => (
            <tr key={forum.id}> {/* 用数据id作为key比index更稳定 */}
              <td>{forum.bookName}</td>
              <td>
                <img 
                  src={forumImages(`./${forum.bookImage.split('/').pop()}`)} 
                  height={100} 
                  width={100} 
                  alt={forum.bookName} 
                />
              </td>
              <td>{forum.description}</td>        
            </tr>
          ))}
        </tbody>
      </table>
      <IfCanPost/>   
    </div>   
  ) 
}

export default ForumComponent;

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