从 Reddit 获取图像？ JavaScript/React（没有 PRAW）答案

【问题标题】：Fetching an image from Reddit? JavaScript/React (no PRAW)从 Reddit 获取图像？ JavaScript/React（没有 PRAW）
【发布时间】：2020-12-16 01:33:45
【问题描述】：

我正在尝试根据我的搜索参数从 Reddit 获取图像。我获取的很好并且能够检索我的数据，但是我在data.preview.images[0].source.url 中收到的网址（Reddit 真的把它埋在那里）都以https://external-preview.redd.it/ 为前缀。当我点击响应中的链接时，我收到一条禁止消息。

我看过人们可以检索图像的视频，但他们可以通过带前缀的 i-reddit 链接或你有什么来做到这一点。我在 JSON 响应中搜索了一下，但找不到任何兼容的链接。

有什么想法吗？

编辑：

这是我的获取代码：


    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 格式返回，我可以通过控制台记录它们。

【问题讨论】：

你能提供一些代码吗？你是如何获取数据的，你要返回什么数据？
是的！我用它编辑了帖子

标签： javascript reactjs fetch reddit imageurl

【解决方案1】：

我想通了，并将解决方案留在这里，因为我希望其他人在升级后从 Reddit 获取时会遇到这个问题。基本上，您必须转义他们发送给您的编码 URL。我是通过以下方法做到的：

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

虽然我确信还有其他更好的方法来解决它。我将留下指向我的 Reddit 帖子的链接，在该帖子中用户将我引导至此解决方案，以防有人想研究它并为自己想出更好的东西。

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

【讨论】：