如何在REACT元素标记中调用图像

Question

我是新的反应js，并将感谢一些建议。试图为每个CarouselItem调用不同的图像

可以在react元素标记中调用图像吗？

我尝试了以下几种方法，但没有成功：

<CarouselItem name="one" img src={iPhone} alt="iPhone"/>

这也不起作用

<CarouselItem><img src={iPhone} alt="iPhone"/></CarouselItem>

下面是我的代码: Carousel.js

import React from 'react';
import Carousel from 'react-elastic-carousel';
import CarouselItem from '../../components/Carousel/CarouselItem/CarouselItem';
import '../../components/Carousel/CarouselItem/CarouselItem.css';
import iPhone from '../../images/img_phone.png';

const breakPoints = [
  { width: 1, itemsToShow: 1 },
  { width: 550, itemsToShow: 2 },
  { width: 768, itemsToShow: 3 },
  { width: 1200, itemsToShow: 4 },
]

const carousel = () => {
  return(
    <Carousel breakPoints={ breakPoints }>
      <CarouselItem><img src={iPhone} alt="iPhone"/></CarouselItem>
      <CarouselItem name="one" img src={iPhone} alt="iPhone"/>
      <CarouselItem name="two" />
      <CarouselItem name="three" />
      <CarouselItem name="four" />
      <CarouselItem name="five" />
      <CarouselItem name="six" />
      <CarouselItem name="seven" />
      <CarouselItem name="eight" />
    </Carousel>
  );
}

export default carousel;

CarouselItem.js

import React from 'react';

const carosuelItem = (props) => {
  return(
    <div className="item">{ props.name }</div>
  );
}

export default carosuelItem;

Answer 1

第一种方法将把名为src的道具传递给CarouselItem组件。此src支柱的值将是导入图像文件的路径。在CarouselItem组件中，您将需要一个img元素，并将src支柱设置为img元素上的src属性的值。

在carousel组件中

<CarouselItem name="one" src={iPhone} alt="iPhone"/>

在CarouselItem组件中

const carosuelItem = (props) => {
  return(
    <div className="item">
       { props.name }
       <img src={props.src} alt={props.alt}/>
    </div>
  );
}

只有在children组件中使用CarouselItem支柱时，第二种方法才能起作用。

在carousel组件中

<CarouselItem name="one">
   <img src={iPhone} alt="iPhone"/>
</CarouselItem>

在CarouselItem组件中

const carosuelItem = (props) => {
  return(
    <div className="item">
       { props.name }
       {props.children}
    </div>
  );
}