CODEWITHSUNDEEP
reactjs
Sachin Bansode
Sachin Bansode

Reputation: 3

How to display image obtained by api call in reactjs

I have recently created A Movie app in Reactjs where I have used themoviedb api 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 poster_path:/fHLS13Iv6FNyyN9I373u67KKH5e.jpg.What should I write inside the src attribute of the img tag for proper displaying of the poster image.

    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;

Upvotes: 0

Views: 5743

Answers (1)

Simon
Simon

Reputation: 191

In the response there is a field called poster_path that contains a piece of an url to the poster image, e.g. "poster_path": "/on9JlbGEccLsYkjeEph2Whm1DIp.jpg". You can use this in https://image.tmdb.org/t/p/w500/{poster_path} to get the image like so https://image.tmdb.org/t/p/w500/on9JlbGEccLsYkjeEph2Whm1DIp.jpg. This full url goes in the src of the <img>.

As a side note, don't post your api-keys in a public forum like this. They are supposed to be your secrets, like your passwords.

Upvotes: 3

Related Questions