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

【问题标题】：displaying mapped images in jsx react.js在 jsx react.js 中显示映射图像
【发布时间】：2020-11-25 16:25:20
【问题描述】：

我正在使用 Material UI 的 Carousel 组件，试图显示我的图像。轮播工作正常，但图像没有显示......只是一个图像文件图片让我知道，它知道应该显示图片。当我将文件直接内联时，图像显示正常： (<img src={akira}/>),

但不是在映射时。

我的代码有问题吗？

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

【问题讨论】：

1.在传递给map()的回调中，第一个参数是元素，索引是第二个2.你的第一个元素是{ image: akira }，而不是akira，所以你需要.map((item, i) => <Item key={i} items={item.image} ... />)（3.不要调用属性items实际上是单个图像）
要像这样调试代码，您可以在 Item 组件的 JSX 中插入 <pre>{JSON.stringify(props)}</pre>。

标签： javascript reactjs jsx

【解决方案1】：

像下面这样试试

在map函数图像中是index值和交换arg参数然后image对象所以我们需要访问image.image
使用index 作为关键道具

function Header() {
  var items = [
    {
      image: akira,
    },
    {
      image: hunter,
    },
    {
      image: kiki,
    },
    {
      image: middle,
    },
  ];

  return (
    <div className="header">
      <Carousel>
        {items.map((item, idx) => (
          <Item key={idx} items={item.image} alt="image" />
        ))}
      </Carousel>
    </div>
  );
}

function Item(props) {
  return (
    <Paper>
      <img src={props.items} />
      <p>{props.alt}</p>
    </Paper>
  );
}

export default Header;

【讨论】：