reactjs中如何显示api调用获取的图片

Question

我最近在 Reactjs 中创建了电影应用程序，我使用 themoviedb api 来获取电影数据库。通过使用 fetch 我是能够获取与我搜索过的电影标题对应的完整json数据，但我无法显示海报的图像。该海报图像的链接是在Json中的poster_path属性下获得的，它是一个字符串比如 poster_path:/fHLS13Iv6FNyyN9I373u67KKH5e.jpg。我应该在 img 标签的 src 属性中写什么才能正确显示海报图像。

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';

    class App extends Component {

    constructor()
    {
        super();
        this.state={
          data: [],
        }
     }
     componentDidMount(){


      }
      save(){

    var val = this.refs.newtext.value;
    console.log('title you have typed'+val);
    fetch(`http://api.themoviedb.org/3/search  /movie?api_key={my-api-key}&query=${val}`).
    then((Response)=> Response.json()).
    then((findresponse)=>{

      console.log(findresponse.results);
      console.log(findresponse.results.poster_path);

      this.setState({
        data: findresponse.results
      })
    })
  }

  render() {
    return (
      <div className="App">

        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Search For Movies</h1>
        </header>
        <p className="App-intro">
          Enter the Title of the  <code>Movie</code>  and hit Search

        </p>
        <input type="text" ref="newtext"/>
         <button onClick={this.save.bind(this)}>Search</button>

        <div className="padder" >
        <table className="centerer">
        <thead className="centerer">
                <tr className="padder">
                     <th className="spacer"> Title </th>
                     <th className="spacer"> Release Date(YYYY-MM-DD) </th>
                     <th className="spacer"> OverView </th>
                     <th className="spacer"> Rating </th>
                     <th className="spacer"> Poster </th>
                </tr>
         </thead>       
        {
          this.state.data.map((ddata,key) =>

                <tbody className="padder">
                <tr className="padder">
                      <td className="bolder"><span>{ddata.title}</span> </td>
                      <td className="padder"><span className="spacer">{ddata.release_date}</span>  </td>
                      <td className="wid padder hei">{ddata.overview}</td>
                      <td className="padder"><span>{ddata.vote_average}</span> </td>
                      <td className="padder"><img src={ddata.poster_path} /> </td>
                </tr>
               </tbody>




          )
            }
           </table>

       </div>
      </div>
    );
  }
}

export default App;

Answer 1

在响应中有一个名为poster_path 的字段，其中包含一段海报图片的网址，例如"poster_path": "/on9JlbGEccLsYkjeEph2Whm1DIp.jpg"。您可以在https://image.tmdb.org/t/p/w500/{poster_path} 中使用它来获取像https://image.tmdb.org/t/p/w500/on9JlbGEccLsYkjeEph2Whm1DIp.jpg 这样的图像。这个完整的网址位于<img> 的src 中。

附带说明，不要在这样的公共论坛上发布您的 api 密钥。它们应该是你的秘密，就像你的密码一样。