Reactjs 如何使用React和Axios访问movieDB API的图像

我正在制作一个电影搜索应用程序，您在其中键入电影的名称，它将返回电影的信息。我已经对它进行了设置，这样我就可以访问API的所有信息，并将其作为我想要的元素返回。但是，我无法访问API中的

poster\u路径

。我想让它在屏幕上以图像的形式返回。以下是浏览器中API搜索的屏幕截图

代码：

从“React”导入React；
从“axios”导入axios；
导出默认类Movielist扩展React.Component{
状态={
标题：“，
人气：“，
海报：，//问题
}
clickHandler=（事件）=>{
如果（event.keyCode===13）{
const query=event.target.value；
常量API_KEY='************************'；
axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API\u KEY}&query=${query}`）
。然后（res=>{
const title=res.data['results'][0]['title']；
this.setState（{title}）；
const popularity=res.data['results'][0]['popularity']
this.setState（{popularity}）；
const poster=res.data['results'][0]['poster\u path']//问题
this.setState（{poster}）；//问题
})
}
}
render（）{
返回(
this.clickHandler（事件）}/>
{this.state.title}
{this.state.popularity}
//问题
)
}
}

这是一种特定于tmdb的配置。您必须使用URL

https://image.tmdb.org/t/p

显示所需图像的大小，并将其作为src传递。参考tmdb API

例如，对于

poster_path

/udDclJoHjfjb8Ekgsd4FDteOkCU.jpg

，图像URL将为

所以在你的代码中，你可以这样做

const baseImgUrl = "https://image.tmdb.org/t/p"
const size = "w500"

const poster = res.data['results'][0]['poster_path']
this.setState({ poster });

return (
  // ....
  <img src={`${baseImgUrl}/${size}${this.state.poster}`} />
)

常量baseImgUrl=”https://image.tmdb.org/t/p"
常数size=“w500”
const poster=res.data['results'][0]['poster_path']
这个.setState（{poster}）；
返回(
// ....
)

const baseImgUrl = "https://image.tmdb.org/t/p"
const size = "w500"

const poster = res.data['results'][0]['poster_path']
this.setState({ poster });

return (
  // ....
  <img src={`${baseImgUrl}/${size}${this.state.poster}`} />
)