Reactjs Reactstrap-在转盘上显示本地图像

我正在尝试创建一个包含存储在react应用程序目录中的图像的旋转木马。当我使用这里的默认示例时：

一切正常。问题是当我添加自定义图像时

import customImage from './images/customImage.jpg';
const items = [
  {
    src: {customImage}, //Not Working
    altText: 'Slide 1',
    caption: 'Slide 1'
  }, 
  {
    src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800   %22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
    altText: 'Slide 2',
    caption: 'Slide 2'
    //Working
  },
  {
    src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
    altText: 'Slide 3',
    caption: 'Slide 3'
    //Working
  }
];

我的旋转木马的代码如下：

const slides = items.map((item) => {
  return (
    <CarouselItem
      className="trustedMechsCarousal"
      onExiting={this.onExiting}
      onExited={this.onExited}
      key={item.src}
    >
    <img src={item.src} alt={item.altText} />
    <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
    </CarouselItem>
  );
});

return(
  <div className='TrustedMechs'>
    <div className='SectionTitle'><h1>Trusted Mechanics</h1></div>
      <Carousel
        activeIndex={activeIndex}
        next={this.next}
        previous={this.previous}
      >
      <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
        {slides}
        <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
        <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
      </Carousel>
    </div>
  </div
);

const slides=items.map（（item）=>{
返回(
);
});
返回(
可信机制
{幻灯片}
当您生成这样的图像时，它会在公用文件夹中查找/images文件夹。

如果文件名正确且位于该位置，代码应该可以工作。
至少从应用程序创建的Apple Read APP基金会开始，它就做了
从“自定义图像”中删除花键，如
const项=[
{
src:{customImage}，//不工作
altText:“幻灯片1”，
描述：“幻灯片1”
}, 
{
….

致：

const项=[
{
src:customImage，
altText:“幻灯片1”，
描述：“幻灯片1”
}, 
{……