reactstrap 旋转木马图像显示问题(过去的帖子没有帮助)
reactstrap carousel image display issue (past posts didn't help)
我尝试使用这些过去的帖子但没有成功:
img not displaying in reactstrap carousel
我正在尝试在 reactstrap 轮播上显示本地图像。
当我使用上面帖子中提到的导入解决方案时,它显示空白框,当我尝试使用 public/images 想法时,它给我带来了这个错误:
Module not found: You attempted to import ../../public/img-01.JPG which
falls outside of the project src/ directory. Relative imports outside of
src/ are not supported.
我也试过像这样从 src 字段中请求文件:
src: require("../../public/img-01.JPG"),
但它返回了同样的错误。
我的代码:
import image1 from "../images/img-01.JPG"
const items = [
{
src: image1,
altText: 'Slide 1',
caption: 'Slide 1'
},
{
src: "https://i.imgur.com/jDiYpKY.jpg",
altText: 'Slide 2',
caption: 'Slide 2'
}
];
const settings = {
dots: false,
infinite: true,
arrows: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
如您所见,我在第二张幻灯片中也尝试了图片的 HTTP link,但这也不起作用。
渲染方法:
render() {
const { activeIndex } = this.state;
const slides = items.map((item) => {
return (
<CarouselItem
className="custom-tag"
tag="div"
key={item.id}
onExiting={this.onExiting}
onExited={this.onExited}
>
<CarouselCaption className="text-danger" captionText=
{item.caption} captionHeader={item.caption} />
</CarouselItem>
);
});
return (
<div>
{/* <style>
{
`.custom-tag {
max-width: 100%;
height: 500px;
background: black;
}`
}
</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>
);
有什么想法吗?
您可以在CarouselItem
中添加img标签,通过class名称设置图片样式。
const slides = items.map((item) => {
return (
<CarouselItem
className="custom-tag"
tag="div"
key={item.id}
onExiting={this.onExiting}
onExited={this.onExited}
>
<img className="carousel-img" src={item.src} />
<CarouselCaption className="text-danger" captionText=
{item.caption} captionHeader={item.caption} />
</CarouselItem>
);
});
我尝试使用这些过去的帖子但没有成功:
img not displaying in reactstrap carousel
我正在尝试在 reactstrap 轮播上显示本地图像。 当我使用上面帖子中提到的导入解决方案时,它显示空白框,当我尝试使用 public/images 想法时,它给我带来了这个错误:
Module not found: You attempted to import ../../public/img-01.JPG which
falls outside of the project src/ directory. Relative imports outside of
src/ are not supported.
我也试过像这样从 src 字段中请求文件:
src: require("../../public/img-01.JPG"),
但它返回了同样的错误。
我的代码:
import image1 from "../images/img-01.JPG"
const items = [
{
src: image1,
altText: 'Slide 1',
caption: 'Slide 1'
},
{
src: "https://i.imgur.com/jDiYpKY.jpg",
altText: 'Slide 2',
caption: 'Slide 2'
}
];
const settings = {
dots: false,
infinite: true,
arrows: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
如您所见,我在第二张幻灯片中也尝试了图片的 HTTP link,但这也不起作用。
渲染方法:
render() {
const { activeIndex } = this.state;
const slides = items.map((item) => {
return (
<CarouselItem
className="custom-tag"
tag="div"
key={item.id}
onExiting={this.onExiting}
onExited={this.onExited}
>
<CarouselCaption className="text-danger" captionText=
{item.caption} captionHeader={item.caption} />
</CarouselItem>
);
});
return (
<div>
{/* <style>
{
`.custom-tag {
max-width: 100%;
height: 500px;
background: black;
}`
}
</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>
);
有什么想法吗?
您可以在CarouselItem
中添加img标签,通过class名称设置图片样式。
const slides = items.map((item) => {
return (
<CarouselItem
className="custom-tag"
tag="div"
key={item.id}
onExiting={this.onExiting}
onExited={this.onExited}
>
<img className="carousel-img" src={item.src} />
<CarouselCaption className="text-danger" captionText=
{item.caption} captionHeader={item.caption} />
</CarouselItem>
);
});