img 未显示在 reactstrap 轮播中

Posted 2023-03-23

【中文标题】img 未显示在 reactstrap 轮播中

【英文标题】：img not displaying in reactstrap carousel

【发布时间】：2019-07-01 15:01:42

【问题描述】：

尝试使用标签和类名让图像显示在 Carousel 的幻灯片中。我将图像保存在与 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;

【问题讨论】：

检查浏览器网络选项卡。它是否试图从正确的位置加载图像？图片存在吗？

图像存在，但在网络标签中看不到任何关于图像的内容

【参考方案1】：

我认为您有两个选择，第一个是更改您查找图像的方式。

第一种方法是使用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"
  ,
  ...
]

【参考方案2】：

我遇到了同样的问题，我尝试了在网上找到的其他解决方案，但没有一个有效，所以我继续创建一个公用文件夹并在其中创建了一个图像文件夹来存储所有图像并做了类似 src: "images/slider1.jpeg", 的事情对我来说就像魔术一样工作。你可以试试这个。

【参考方案3】：

您需要在您的public 文件夹中创建一个images 文件夹，该文件夹将包含您的所有图片，然后您的src 将看起来像src: './images/slider1.jpeg'

【参考方案4】：

第一次导入图片路径：

从'../LandingPage/image.jpg'导入图片； 然后给 src 没有 '' 这个：

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

【参考方案5】：

将图像放在组件所在的同一文件夹中。现在将该图像导入为 从“./exapmleimage.jpg”导入图像 现在用它作为 来源：图像 为我工作