Question

我正在开发客户端React应用。该应用程序应显示来自Google相册的照片库。我正在使用Firebase存储专辑的短网址（例如https://photos.app.goo.gl/[ALBUM_ID]和专辑的标题。然后我请求该网址并通过regex提取图像。在dekstop版本上，一切正常。在移动设备上运行时，我可以无法获取任何照片。如果我直接在移动浏览器中输入相册的网址，则表明Google Photos应用正在打开；如果在移动设备上，我切换至“桌面版本”，则可以正常运行。有什么方法可以替代这种行为？

我尝试将内容宽度设置为1024。这没有帮助。

<meta name="viewport" content="width=1024" />

class Album extends Component {
    state = {
        images: null,
        fullscreen: false,
        currentIndex: 0,
        loading: false
    }

async componentDidMount() {
        await this.setImages();
    }

    async setImages() {
        if (!this.currentAlbumId || this.currentAlbumId !== this.props.match.params.id) {
            this.currentAlbumId = this.props.match.params.id;

            if (!this.state.loading) {
                this.setState({ loading: true });
            }

            const album = await this.getAlbum(this.props.match.params.id);
            const links = this.extractPhotos(album);

            if (links && links.length > 0) {
                this.setState({
                    images: links.map((url) => ({
                        src: `${url}=w1024`,
                        width: 16,
                        height: 9
                    })),
                })
            }
            this.setState({ loading: false });
        }
    }

    async getAlbum(id) {
        // https://google-photos-album-demo.glitch.me/{id}
        const response = await Axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://photos.app.goo.gl/${id}`);
        return response.data;
    }

    extractPhotos(content) {
        const regex = /\["(https:\/\/lh3\.googleusercontent\.com\/[a-zA-Z0-9\-_]*)"/g;

        const links = new Set()
        let match
        while (match = regex.exec(content)) {
            links.add(match[1])
        }
        return Array.from(links)
    }

如何在移动浏览器中显示Google相簿？

0 个答案: