React项目中无法从JSON加载本地图片，仅显示图标求助

你的问题核心是React项目中本地图片路径未被正确解析，远程图片能正常显示说明组件渲染逻辑没问题，问题出在本地资源的加载方式上。

原因分析 #

React项目依赖webpack打包，本地图片这类静态资源需要被webpack识别并处理（比如生成哈希文件名、复制到输出目录）。但你在JSON里直接写的相对路径../img_reactjs01/Katana.png只是普通字符串，webpack不会对其进行解析，导致打包后浏览器找不到对应文件，只能显示占位图标。

解决方案 #

下面提供两种可行的解决方法：

方法1：在组件中动态引入本地图片

修改JSON文件，只保留图片文件名：

[
    {
        "id": 1,
        "name": "Product 1",
        "image": "Katana.png", // 仅保留文件名
        "price": "$20",
        "description": "This is a description of Product 1"
    }
    // 其他项保持不变
]

然后在postCard.js中使用require动态加载图片：

// 替换原img标签代码
<img src={require(`../img_reactjs01/${s.image}`)} alt={s.name} />

webpack会识别require中的路径，自动处理图片资源，生成正确的打包后路径。

方法2：将图片放到public目录下

把img_reactjs01文件夹移动到项目根目录的public文件夹中（无public目录则新建），然后修改JSON中的路径为绝对路径：

[
    {
        "id": 1,
        "name": "Product 1",
        "image": "/img_reactjs01/Katana.png", // 绝对路径指向public下的资源
        "price": "$20",
        "description": "This is a description of Product 1"
    }
    // 其他项保持不变
]

public目录下的资源不会被webpack处理，浏览器可以直接通过绝对路径访问，适合不需要webpack优化的静态资源。

额外代码小问题修正 #

你代码中的onmouseover事件写法不符合React规范：

• React事件需用驼峰式命名，应改为onMouseOver
• 事件处理逻辑不能直接写字符串，要用箭头函数或绑定方法
  示例修改：

<div className="card-stl" onMouseOver={() => { /* 此处编写鼠标悬停逻辑，比如修改样式 */ }}>

若要修改背景色，建议通过state控制className或直接修改style属性，而非直接操作DOM。

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