img未显示在reactstrap轮播中 [英] img not displaying in reactstrap carousel
问题描述
尝试使用标签和类名将图像显示在Carousel的幻灯片中.我将图像与Slider.js文件保存在同一文件夹中.我已将items数组中的默认id属性更改为source,并将键更改为item.src,但仍然没有任何乐趣.我在屏幕上看到小图像符号,好像它知道它试图在图像上显示一样,但是如果需要的话,不是我想要的实际图像
Trying to get images to display in the slides in Carousel using a tag and classname. I have images saved in the same folder as the Slider.js file. I have changed the default id property in the items array to source and changed the key to item.src but still no joy. I am getting the little image symbol on the screen as though it knows it is trying to display on image, but not the actual image I want if that makes sense
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;
推荐答案
我认为您有两种选择,第一种是更改寻找图像的方式.
I think you have two options, the first one is to change the way you're looking for the image.
第一种方法是使用require.
The first approach is to use require.
const items = [
{
src: require('./path/to/your/file.ext),
altText: "Slide 1",
caption: "Slide 1"
},
...
]
第二个是导入文件,然后再将其添加到项目中.
The second one is to import your file before adding it to the items.
import Image1 from './path/to/your/file.ext';
// Then on the items
const items = [
{
src: Image1,
altText: "Slide 1",
caption: "Slide 1"
},
...
]
这篇关于img未显示在reactstrap轮播中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!