Reactjs img未显示在转盘中

尝试使用标记和类名在旋转木马的幻灯片中显示图像。我将图像保存在Slider.js文件所在的文件夹中。我已经将items数组中的默认id属性更改为source，并将key更改为item.src，但仍然没有更改。我在屏幕上看到一个小小的图像符号，好像它知道它试图在图像上显示，但如果这有意义的话，它不是我想要的实际图像

import React, { Component } from "react";
import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption
} from "reactstrap";

const items = [
  {
    src: "slider1.jpeg",
    altText: "Slide 1",
    caption: "Slide 1"
  },
  {
    src: "slider2.jpeg",
    altText: "Slide 2",
    caption: "Slide 2"
  },
  {
    src: "slider3.jpeg",
    altText: "Slide 3",
    caption: "Slide 3"
  }
];

class Slider extends Component {
  constructor(props) {
    super(props);
    this.state = { activeIndex: 0 };
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.goToIndex = this.goToIndex.bind(this);
    this.onExiting = this.onExiting.bind(this);
    this.onExited = this.onExited.bind(this);
  }

  onExiting() {
    this.animating = true;
  }

  onExited() {
    this.animating = false;
  }

  next() {
    if (this.animating) return;
    const nextIndex =
      this.state.activeIndex === items.length - 1
        ? 0
        : this.state.activeIndex + 1;
    this.setState({ activeIndex: nextIndex });
  }

  previous() {
    if (this.animating) return;
    const nextIndex =
      this.state.activeIndex === 0
        ? items.length - 1
        : this.state.activeIndex - 1;
    this.setState({ activeIndex: nextIndex });
  }

  goToIndex(newIndex) {
    if (this.animating) return;
    this.setState({ activeIndex: newIndex });
  }

  render() {
    const { activeIndex } = this.state;

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

    return (
      <div>
        <style>
          {`.custom-tag {
                max-width: 100%;
                height: 500px;
              }`}
        </style>
        <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>
    );
  }
}

export default Slider;

import React，{Component}来自“React”；
进口{
旋转木马
旋转木马，
转盘控制，
旋转唱机，
旋转木马
}从“反应带”；
常数项=[
{
src:“slider1.jpeg”，
备选文本：“幻灯片1”，
描述：“幻灯片1”
},
{
src:“slider2.jpeg”，
备选文本：“幻灯片2”，
描述：“幻灯片2”
},
{
src:“slider3.jpeg”，
备选文本：“幻灯片3”，
描述：“幻灯片3”
}
];
类滑块扩展组件{
建造师（道具）{
超级（道具）；
this.state={activeIndex:0}；
this.next=this.next.bind（this）；
this.previous=this.previous.bind（this）；
this.goToIndex=this.goToIndex.bind（this）；
this.onExiting=this.onExiting.bind（this）；
this.onExited=this.onExited.bind（this）；
}
onExiting（）{
这是。动画=真；
}
onExited（）{
这是。动画=假；
}
下一个（）{
如果（这个动画）返回；
常数nextIndex=
this.state.activeIndex==items.length-1
? 0
：this.state.activeIndex+1；
this.setState（{activeIndex:nextIndex}）；
}
前（）{
如果（这个动画）返回；
常数nextIndex=
this.state.activeIndex==0
？项目长度-1
：this.state.activeIndex-1；
this.setState（{activeIndex:nextIndex}）；
}
goToIndex（新索引）{
如果（这个动画）返回；
this.setState（{activeIndex:newIndex}）；
}
render（）{
const{activeIndex}=this.state；
const slides=items.map（item=>{
返回(
);
});
返回(
{.custom标记{
最大宽度：100%；
高度：500px；
}`}
{幻灯片}
);
}
}
导出默认滑块；

你需要在你的

公共

文件夹中创建一个

图像

文件夹，其中包含你所有的图片，然后你的src看起来像

src:'。/images/slider1.jpeg'

我想你有两个选择，第一个是改变你寻找图像的方式

第一种方法是使用require

const items = [
  {
    src: require('./path/to/your/file.ext),
    altText: "Slide 1",
    caption: "Slide 1"
  },
  ...
]

第二种方法是在将文件添加到项目之前导入文件

import Image1 from './path/to/your/file.ext';

// Then on the items
const items = [
  {
    src: Image1,
    altText: "Slide 1",
    caption: "Slide 1"
  },
  ...
]

---

首先导入图像路径：

从“../LandingPage/image.jpg”导入图像； 然后给出不带“”的src，如下所示：

---

将图像放在组件所在的同一文件夹中。现在将该图像导入为 从“/exapmleimage.jpg”导入图像 现在把它当作 src:image

---

为我工作

检查浏览器网络选项卡。它是否试图从正确的位置加载图像？映像是否存在？映像存在是，但在“网络”选项卡中看不到有关映像的任何内容

const items = [
  {
    src: image,
    altText: 'Slide 1',
    caption: 'Slide 1',
    header: 'Slide 1 Header',
    key: '1'
  },