从 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/
我正在尝试根据我的搜索参数从 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/