尝试使用标记和类名获取要在Carousel中的幻灯片中显示的图像。我将图像保存在与Slider.js文件相同的文件夹中。我已经将items数组中的默认id属性更改为source,并将键更改为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;
发布于 2019-04-16 08:40:17
我认为你有两个选择,第一个是改变你寻找图像的方式。
第一种方法是使用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"
},
...
]
发布于 2021-10-14 14:40:49
我遇到了同样的问题,我尝试了其他我在网上找到的解决方案,但都没有奏效,所以我继续创建了一个公共文件夹,并在其中创建了一个图像文件夹来存储所有的图像,然后做了像这样的src: "images/slider1.jpeg",
,它对我来说就像变魔术一样。你可以试一试。
发布于 2019-04-16 08:32:34
您需要在public
文件夹中创建一个images
文件夹,该文件夹将包含所有图片,然后您的src将看起来像src: './images/slider1.jpeg'
https://stackoverflow.com/questions/54574293
复制相似问题