Javascript 在jsx react.js中显示映射图像

我正在使用材质UI的旋转木马组件，试图显示我的图像。旋转木马工作正常，但图像没有显示。。。只是一个图像文件图片，它让我知道，它知道一个图片应该显示。当我将文件直接内联时，图像显示良好： （

）

但映射时不会

我的代码有问题吗

import React from 'react';
import Carousel from 'react-material-ui-carousel';
import {Paper} from '@material-ui/core'
import akira from './images/akira.jpg';
import hunter from './images/hunter.jpg';
import kiki from './images/kiki.jpg';
import middle from './images/middle.jpg';
import './Header.css';

function Header()
{    
    var items = [
        {
            image: akira
        },
        {
            image: hunter
        },
        {
            image: kiki
        },
        {
            image: middle
        }
    ]
 
    return (
        <div className="header">
            <Carousel>
                {
                    items.map( (i, image) => <Item key={i} items={image} alt='image'/> )
                    
                }
            </Carousel>
        </div>
    )
}
 
function Item(props)
{
    return (

        <Paper>
            <img src={props.items}/>
            <p>{props.alt}</p>
        </Paper>
    )
}

export default Header

从“React”导入React；
从“反应物料ui转盘”导入转盘；
从“@material ui/core”导入{Paper}
从“/images/akira.jpg”导入akira；
从“/images/hunter.jpg”导入hunter；
从“./images/kiki.jpg”导入kiki；
从“./images/middle.jpg”导入middle；
导入“./Header.css”；
函数头（）
{    
可变项目=[
{
图片：akira
},
{
图片：亨特
},
{
图片：kiki
},
{
图片：中
}
]
返回(
{
items.map（（i，图像）=>）
}
)
}
功能项目（道具）
{
返回(
{props.alt}

)
}
导出默认标题

试试下面的方法

在映射函数中，图像是

索引

值并交换arg参数，然后

图像

对象，因此我们需要访问

图像。图像

对关键道具使用

索引

函数头（）{
可变项目=[
{
图片：akira，
},
{
图片：亨特，
},
{
图片：kiki，
},
{
图片：中，
},
];
返回(
{items.map（（item，idx）=>(
))}
);
}
功能项目（道具）{
返回(
{props.alt}

);
}
导出默认标题；

1。在传递给的回调中，第一个参数是元素，第二个参数是索引2。您的第一个元素是

{image:akira}

，而不是

akira

，因此您需要

.map（（item，i）=>）

（3.当属性

items

实际上是一个单独的图像时，不要调用它）来调试这样的代码，您可以在项目组件的JSX中插入

{JSON.stringify（props）}

。