React组件间使用Props加载图片失败问题求助

核心问题1：数据遍历逻辑错误 #

你的data.json是一个对象（包含HipHop和House两个数组属性），但你直接调用Data.map()遍历——对象本身没有map方法，只有数组支持该操作，这会导致遍历失效，无法生成卡片。

核心问题2：图片路径错误 #

React项目中，public文件夹下的资源需使用绝对路径（从/开头，打包后public内文件会直接置于根目录），而非相对路径../public/xxx，否则React无法正确解析资源位置。

修复步骤 #

1. 修正JSON中的图片路径 #

将url改为绝对路径格式：

{
"HipHop": [
  {
    "id": 1,
    "url": "/MainCardImages/hiphopMainCard.png",
    "description": "HipHopCard",
    "title": "Hip Hop"
  }
],
"House":[
  {
    "id": 2,
    "url": "/MainCardImages/houseMainCard.png",
    "description": "House Card",
    "title": "House"
  }
]
}

2. 修正App.jsx的遍历逻辑 #

先合并对象中的所有卡片数组，再进行遍历，同时添加React列表要求的唯一key属性：

import MainCard from './components/MainCard'
import Data from "./data.json"

function App() {
  // 合并所有分类下的卡片数据为一个数组
  const allCards = [...Data.HipHop, ...Data.House]
  
  const maincard = allCards.map(card => {
    return(
      <MainCard key={card.id} image={card.url} />
    )
  })
  
  return (
    <div className="App">
      {maincard}
    </div>
  )
}

export default App;

3. （可选）完善MainCard组件 #

添加alt属性提升页面可访问性：

function MainCard(props){
  return(
    <div className="mainCard">
      <img src={props.image} alt={props.description || '卡片图片'} />
    </div>
  )
}

export default MainCard;

额外检查项 #

• 确认public/MainCardImages文件夹存在，且图片文件名（含大小写）与JSON中完全匹配
• 确保React项目已正确启动，资源路径未被打包工具修改

内容的提问来源于stack exchange，提问作者bit.con