title: How to display image obtained by api call in reactjs
body: <p>I have recently created <strong>A Movie app</strong> in <strong>Reactjs</strong> where I have used <strong>themoviedb api</strong> to get the movies database.By using fetch I am able to get the complete json data corresponding to the title of the movie that I have searched but I am not able to display the image of the poster.The link of that poster image is obtained in the Json under poster_path attribute and it is a string like <strong>poster_path:/fHLS13Iv6FNyyN9I373u67KKH5e</strong>.jpg.<strong>What should I write inside the src attribute of the img tag for proper displaying of the poster image.</strong></p>
  
  <pre><code>    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}&amp;query=${val}`).
      then((Response)=&gt; Response.json()).
      then((findresponse)=&gt;{
  
        console.log(findresponse.results);
        console.log(findresponse.results.poster_path);
  
        this.setState({
          data: findresponse.results
        })
      })
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
  
          &lt;header className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h1 className="App-title"&gt;Search For Movies&lt;/h1&gt;
          &lt;/header&gt;
          &lt;p className="App-intro"&gt;
            Enter the Title of the  &lt;code&gt;Movie&lt;/code&gt;  and hit Search
  
          &lt;/p&gt;
          &lt;input type="text" ref="newtext"/&gt;
           &lt;button onClick={this.save.bind(this)}&gt;Search&lt;/button&gt;
  
          &lt;div className="padder" &gt;
          &lt;table className="centerer"&gt;
          &lt;thead className="centerer"&gt;
                  &lt;tr className="padder"&gt;
                       &lt;th className="spacer"&gt; Title &lt;/th&gt;
                       &lt;th className="spacer"&gt; Release Date(YYYY-MM-DD) &lt;/th&gt;
                       &lt;th className="spacer"&gt; OverView &lt;/th&gt;
                       &lt;th className="spacer"&gt; Rating &lt;/th&gt;
                       &lt;th className="spacer"&gt; Poster &lt;/th&gt;
                  &lt;/tr&gt;
           &lt;/thead&gt;       
          {
            this.state.data.map((ddata,key) =&gt;
  
                  &lt;tbody className="padder"&gt;
                  &lt;tr className="padder"&gt;
                        &lt;td className="bolder"&gt;&lt;span&gt;{ddata.title}&lt;/span&gt; &lt;/td&gt;
                        &lt;td className="padder"&gt;&lt;span className="spacer"&gt;{ddata.release_date}&lt;/span&gt;  &lt;/td&gt;
                        &lt;td className="wid padder hei"&gt;{ddata.overview}&lt;/td&gt;
                        &lt;td className="padder"&gt;&lt;span&gt;{ddata.vote_average}&lt;/span&gt; &lt;/td&gt;
                        &lt;td className="padder"&gt;&lt;img src={ddata.poster_path} /&gt; &lt;/td&gt;
                  &lt;/tr&gt;
                 &lt;/tbody&gt;
  
  
  
  
            )
              }
             &lt;/table&gt;
  
         &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>