从 Reddit 获取图像? JavaScript/React(无虾)

Fetching an image from Reddit? JavaScript/React (no PRAW)

我正在尝试根据我的搜索参数从 Reddit 获取图片。我正在抓取并且能够检索我的数据,但是我在 data.preview.images[0].source.url 中收到的 url(Reddit 确实将它埋在那里)都以 https://external-preview.redd.it/ 为前缀。当我点击响应中的 link 时,我收到一条禁止消息。

我看过人们可以检索图像的视频,但他们可以通过带前缀的 i-reddit link 或其他方式来检索图像。我在 JSON 响应中搜索了一下,但找不到任何兼容的 links.

有什么想法吗?

编辑:

这是我的抓取代码:


    state = {
        redditData: []
    }

    componentDidMount(){
        fetch(`https://www.reddit.com/search.json?q=animal_crossing`)
        .then(response => response.json())
        .then(redditData => this.setState({redditData: redditData.data.children.slice(5, 10)}))
    }

    itsCardTime = () => {
        return this.state.redditData.map(rd => <RedditCard key={rd.id} data={rd.data}/>)
    }

    render(){
        return(
            <div className="homecontent">
                <div className="homeimage">
                    <h1 >cute image</h1>
                </div>
                <div className="redditdata">
                    {this.itsCardTime()}
                </div>
            </div>
        )
    }
}

这是我应该渲染图像的代码:

    render(){
        console.log(this.props.data)
    return(
        <div className="redditcard">
            <h5>
                {this.props.data.title}
                {/* {this.props.data.preview ? console.log(this.props.data.preview.images[0].resolutions[0].url) : null } */}
                {/* {this.props.data.preview ? <img src={this.props.data.preview.images[0].source.url}/> : null} */}
            </h5>
            <p>{this.props.data.subreddit_name_prefixed}</p>
        </div>
    )}
}

我的回复以 JSON 格式返回,我可以通过控制台记录它们。

我弄明白了,我将解决方案留在这里,因为我希望其他人在升级后从 Reddit 获取时会 运行 解决这个问题。基本上,您必须转义他们发送给您的编码 URL 。我使用以下方法这样做:

getUrl = (imgUrl) => {
        let encoded = imgUrl.replace('amp;s', 's')
        let doubleEncoded = encoded.replace('amp;', '')
        let tripleEncoded = doubleEncoded.replace('amp;', '')
        return tripleEncoded
    }

虽然我确信还有其他更好的方法可以解决这个问题。我会把 link 留给我的 Reddit post,其中一位用户将我引导到这个解决方案,以防有人想研究它并为自己想出更好的东西。

https://www.reddit.com/r/redditdev/comments/ihgw5j/cant_get_the_images_to_populate_from_my_fetch/