Reactjs 有人能解释一下为什么react组件没有输出图像或正确的按键吗？

PNG图像本地保存在我的机器上，并导入到该组件中。它们没有加载到页面上。我也得到一个关键道具错误。当我从一个普通的RESTAPI中提取时，关键道具解决方案正在工作。当我试图引用自己的数组时，它停止了工作。图像src显示的是“[Object Object]”，而不是我所期望的图像源

从“React”导入React；
从“../img/basketball.png”导入basketball；
从“../img/bike.png”导入bike；
从“../img/boxing.png”导入装箱；
函数ExerciseIcons（）{
返回(
[
{
名称：“自行车”，
id:“1”，
图片：
},
{
名称：“篮球”，
id:“2”，
图片：{basketball}
},
{
名称：“拳击”，
id:“3”，
图像：{boxing}
},
].map（项目=>(



))
)
}
导出默认图标；

---

您的阵列存在一些问题

basketball

和

boxing

在它们周围有

{}

，这是对象语法。因此，

image

键的值实际上类似于

{basketball:basketball}

。这就是为什么它显示“[对象]”<代码>自行车是一个完整的JSX元素，而不是图像源

您需要将其更改为：

[
{
名称：“自行车”，
id:“1”，
图片：自行车
},
{
名称：“篮球”，
id:“2”，
图片：篮球
},
{
名称：“拳击”，
id:“3”，
图片：拳击
},
]

记住：

{}

在JSX中是用于计算JavaScript表达式的语法。在JSX之外，这是对象表示法

---

键的问题在于您将其提供给了错误的元素。键必须提供给映射函数内的根元素。我想这是一个
ul
（虽然我不知道这是否是您真正想要的，但它会为每个项目列出一个新的列表）。
您是否偶然使用了Webpack？Webpack会查找“public”或我认为是“assets”目录以正确加载图像。它不会识别你的/img/目录，除非你修改了网页配置指向那里