我正在使用React进行辅助项目,并且正在使用tmdb API。
我的GET请求
performSearch = () => { // Requesting data from API
axios.get(`${URL}api_key=${API_KEY}&language=en-US&query=${this.state.searchInput}${PARAMS}`)
.then((res) => {
console.log(res.data.results);
this.setState({ searchResults: res.data.results});
});
}
然后使用map函数渲染结果,如下所示
const Suggestions = (props) => {
const options = props.searchResults.map(r => (
<li className='search-results'
key={r.id} >
{r.title}
{r.name}
{r.poster_path}
</li>
))
return <ul>{options}</ul>
}
export default Suggestions
我需要的是URL'https://image.tmdb.org/t/p/w300'+ {r.poster_path}来渲染图像,我该怎么做呢?最终结果看起来像这样的“ https://image.tmdb.org/t/p/w300/gwPSoYUHAKmdyVywgLpKKA4BjRr.jpg”
最佳答案
您可以将其作为属性传递给img对象。例如,使用模板字符串:
const Suggestions = (props) => {
const options = props.searchResults.map((r) => (
<li className='search-results' key={r.id}>
{r.title}
{r.name}
<img src={`https://image.tmdb.org/t/p/w300/${r.poster_path}`} alt={r.title} />
</li>
))
return <ul>{options}</ul>
};
export default Suggestions