React JS中基于数据库返回数据实现图片动态加载问题求助

你当前的写法无法生效是因为webpack等前端打包工具在编译阶段会静态解析require引入的资源，直接传入动态变量item.name时，打包工具无法提前识别需要打包的图片资源，运行时就会出现资源找不到的错误。

你已经提前导入了所有需要用到的物品图片，只需建立物品名称到导入资源的映射关系即可正常调用，修改后的代码如下：

import scimitar from "../../images/scimitar.png";
import defender from "../../images/defender.png";
import arrows from "../../images/arrows.png";
import cape from "../../images/cape.png";
import platebody from "../../images/platebody.png";
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
// 建立名称与图片资源的映射表
const imageMap = {
  scimitar: scimitar,
  defender: defender,
  arrows: arrows,
  cape: cape,
  platebody: platebody
}

const ItemCard = ({ item }) => {
    return (
        <div>
            <p key={item.id}>ID: {item.id}</p>
            <p>Name: {item.name}</p>
            <p>{item.examine}</p>
            <p>
                <Link to={`/items/${item.id}`}>{item.name}</Link>
            </p>
            {/* 直接从映射表取对应资源 */}
            <img src={imageMap[item.name]} alt={item.examine} />
        </div>
    )
}

const ItemList = () => {
    const [items, setItems] = useState(null);

    const populateItems = async () => {
        const data = await getItems();
        setItems(data);
    };

    useEffect(() => populateItems(), []);


    return (
        <div>
            {items &&
                items.map((item, index) => (
                    <ItemCard item={item} key={index} />
                ))
            }
        </div>
    )
}

注意：请确保数据库返回的item.name取值和映射表的key完全匹配，大小写不一致时可以统一转小写处理，例如imageMap[item.name.toLowerCase()]

如果后续会新增大量物品图片，不需要逐个导入，将所有物品图片放入项目public/images目录下，直接拼接静态路径即可加载，修改图片标签代码即可：

// 无需提前导入所有图片，直接拼接public下的静态路径
<img src={`/images/${item.name}.png`} alt={item.examine} />

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