我一直在玩react-。
我已经将它和lightbox安装在一起,当我显示在线照片时,它工作得很好。
当我尝试显示导入的图片时,它显示的不是照片,而是相框。
import React from 'react';
import Gallery from 'react-photo-gallery';
import Lightbox from 'react-images';
import thumbsup from "../../assets/images/thumbsup.png";
const photos = [
{ src: {thumbsup}, width: 4, height: 3 },
{ src: 'https://source.unsplash.com/Dm-qxdynoEc/800x799', width: 1, height: 1 },
{ src: 'https://source.unsplash.com/qDkso9nvCg0/600x799', width: 3, height: 4 }
];
export default class Sample extends React.Component {
constructor() {
super();
this.state = { currentImage: 0 };
this.closeLightbox = this.closeLightbox.bind(this);
this.openLightbox = this.openLightbox.bind(this);
this.gotoNext = this.gotoNext.bind(this);
this.gotoPrevious = this.gotoPrevious.bind(this);
}
openLightbox(event, obj) {
this.setState({
currentImage: obj.index,
lightboxIsOpen: true,
});
}
closeLightbox() {
this.setState({
currentImage: 0,
lightboxIsOpen: false,
});
}
gotoPrevious() {
this.setState({
currentImage: this.state.currentImage - 1,
});
}
gotoNext() {
this.setState({
currentImage: this.state.currentImage + 1,
});
}
render() {
return (
<div>
<Gallery photos={photos} onClick={this.openLightbox} />
<Lightbox images={photos}
onClose={this.closeLightbox}
onClickPrev={this.gotoPrevious}
onClickNext={this.gotoNext}
currentImage={this.state.currentImage}
isOpen={this.state.lightboxIsOpen}
/>
</div>
)
}
}
我试图像在其他组件中一样显示它。
import thumbsup from "../../assets/images/thumbsup.png";
{ src: {thumbsup}, width: 4, height: 3 }
发布于 2018-08-07 06:52:07
删除{thumbsub}周围的大括号应该可以解决您的问题。
const photos = [
{ src: thumbsup, width: 4, height: 3 },
{ src: 'https://source.unsplash.com/Dm-qxdynoEc/800x799', width: 1, height: 1 },
{ src: 'https://source.unsplash.com/qDkso9nvCg0/600x799', width: 3, height: 4 }
];
就像您现在拥有的一样,照片对象将如下所示:
{
src: {
thumbsup: "/..../....png"
},
width: 4,
height: 3
}
https://stackoverflow.com/questions/51712491
复制相似问题