React组件无法从JS数据文件加载图片求助

问题根源 #

你的代码里有两个关键错误导致图片无法正常显示：

• 数据文件中image字段格式错误：{f18}这种语法会创建一个键值对为{f18: "图片路径"}的对象，但<img>的src属性需要的是字符串类型的路径，不是对象。
• 组件中JSX拼接方式错误：{<img src={data.image} /> + data.name}会把React元素强制转换成字符串再和名称拼接，最终输出[object Object]F/A-18 Hornet这类无效内容，完全不符合预期。

修正步骤 #

1. 修正数据文件（jetData.js）

把每个对象里的image: {xxx}改成直接赋值导入的图片变量：

import f18 from './assets/jets/f-18cd-hornet.png'
import f22 from './assets/jets/f-22-raptor.png'
import mig29 from './assets/jets/mig-29.png'
import su27 from './assets/jets/Sukhoi_Su-27SKM.png'

export const jetData = [
    {
        image: f18, // 直接使用图片路径变量，而非对象
        name: 'F/A-18 Hornet'
    },
    {
        image: f22,
        name: 'F-22 Raptor'
    },
    {
        image: mig29,
        name: 'MiG-29'
    },
    {
        image: su27,
        name: 'Su-27'
    },
]

2. 修正主组件（MainBar.js）

去掉错误的+拼接逻辑，用JSX原生方式渲染图片和名称：

import React from 'react'
import {jetData} from '../jetData'

const MainBar = () => {
  return (
    <div className='text-white'>
      {jetData.map((data, index) => {
          return (
            <div key={index}>
              <img src={data.image} alt={data.name} /> {/* 增加alt属性，满足可访问性要求 */}
              {data.name}
            </div>
          );
        })}
    </div>
  )
}

export default MainBar

额外建议 #

• 如果你的Jet数据有唯一标识字段（比如id），建议用data.id作为key，比index更符合React列表渲染的性能规范。
• 可以给图片添加固定宽高样式，避免页面布局抖动。

内容的提问来源于stack exchange，提问作者Jakub Polański