私は最近、私は完全に取得することができる午前フェッチ使用してdatabase.By映画を取得するために<strong>themoviedbのAPI</strong>を使用していた<strong>Reactjs</strong>で動画アプリ</strong>を<strong>作成した

Question

reactjsにAPI呼び出しによって得られた画像を表示する方法私が検索した映画のタイトルに対応するjsonデータですが、ポスターの画像を表示することはできません。そのポスター画像のリンクは、poster_path属性のJsonで取得され、のような文字列です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

ポスター画像のURLの部分を含んposter_pathと呼ばれるフィールドが、例えば、あります"poster_path": "/on9JlbGEccLsYkjeEph2Whm1DIp.jpg"。 https://image.tmdb.org/t/p/w500/{poster_path}でこれを使用すると、https://image.tmdb.org/t/p/w500/on9JlbGEccLsYkjeEph2Whm1DIp.jpgのような画像が得られます。この完全なURLは、<img>のsrcにあります。

このような公開フォーラムにapi-keyを投稿しないでください。彼らはあなたのパスワードのようなあなたの秘密であるはずです。