1

这是我的代码

import React from "react";
import { Grid, Header } from "semantic-ui-react";
import Gallery from "react-photo-gallery";
import Lightbox from "react-images";
import _1 from "../images/pics/2.jpg";
import _2 from "../images/pics/1.jpg";
import _3 from "../images/pics/3.jpg";
import _4 from "../images/pics/4.jpg";
import _5 from "../images/pics/5.jpg";
import _6 from "../images/pics/6.jpg";
import _7 from "../images/pics/7.jpg";
import _8 from "../images/pics/8.jpg";
import _9 from "../images/pics/9.jpg";

const photos = [
{
    src: _1,
    width: 4,
    height: 3
},
{
    src: _2,
    width: 2,
    height: 2
},
{
    src: _3,
    width: 2,
    height: 2
},
{
    src: _4,
    width: 2,
    height: 2
},
{
    src: _5,
    width: 2,
    height: 2
},
{
    src: _6,
    width: 2,
    height: 2
},
{
    src: _7,
    width: 2,
    height: 2
},
{
    src: _8,
    width: 2,
    height: 2
},
{
    src: _9,
    width: 2,
    height: 2
}
];


class SiteGalleryPage extends React.Component {
    constructor() {
        super();

        this.state = {
            currentImage: 0,
            lightboxIsOpen: false
        };
    }

    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 (
           <Grid>
                <Grid.Row centered>
                    <Header color="teal" as="h2">
                        Site Gallery
                    </Header>
                </Grid.Row>
                <Grid.Row>
                    <div>
                        <Gallery photos={photos} onClick={this.openLightbox} 
/>
                        <Lightbox
                            images={photos}
                            isOpen={this.state.lightboxIsOpen}
                            onClickPrev={this.gotoPrevious}
                            onClickNext={this.gotoNext}
                            currentImage={this.state.currentImage}
                            onClose={this.closeLightbox}
                        />
                    </div>
                </Grid.Row>
            </Grid>
        );
    }
}

export default SiteGalleryPage;

我正在使用 react-images、react-photo-gallery 库。当某些图像在浏览器中可见时，它们会被旋转。但是当它们保存在文件夹中时它们很好。它们都是用手机点击的，但其中一些只是旋转。

请帮我解决这个问题！

4

0 回答 0