Reagieren - Zusammenführen von 2 Strings, um URL zu erhalten

Question

Wie kann ich einen Link http://image.tmdb.org/t/p/w185/ und {item.backdrop_path} verbinden, die den Rest des Links bereitstellt? Zum Beispiel am Ende sollte es wie folgt aussehen: http://image.tmdb.org/t/p/w185/bcRFf5Qmw4XotFYAfj8fCS8PJy5.jpg

dies ist der Code selbst:

export default class MoviesSearch extends Component { 
    render() { 
    const {movieprop} = this.props; 

    return (
     <ul className = "col-md-4 list-group"> 
     { 
      movieprop && movieprop.slice(0,5).map((item) => 
      <li key={item.id}> 
      <h4>name:{item.title }</h4> 
      <p>release date: {item.release_date}</p> 
      <p>vote: {item.vote_average}</p> 
      <img src="http://image.tmdb.org/t/p/w185{item.backdrop_path}"/> //NOT WORKING 
      </li> 
     ) 
     } 
     </ul> 
    ) 
    } 
} 

Momentan funktioniert es für Titel, Erscheinungsdatum und die Abstimmung in Ordnung, aber ich kann die URL nicht bekommen. Die Daten stammen von themoviedb: http://api.themoviedb.org/3/discover/movie?certification_country=US&certification=R&sort_by=vote_average.desc&api_key=79eb5f868743610d9bddd40d274eb15d

Bitte lassen Sie mich wissen, wenn meine Erklärung ist schrecklich und ich muss weitere Informationen zur Verfügung stellen.

Answer 1

Sie suchen eine Zeichenfolge in JSX zu verketten? Hier ist, wie:

<img src={"http://image.tmdb.org/t/p/w185" + item.backdrop_path} /> 

Alternativ in ES6 Sie Template Literals, wie diese verwenden:

<img src={`http://image.tmdb.org/t/p/w185${item.backdrop_path}`} /> 

---

Eine einfache Demo des Ergebnisses here. (Überprüfen Sie das Element, um die src URL zu sehen.)