javascript - React - 合并 2 个字符串以获取 URL

Question

如何加入链接 http://image.tmdb.org/t/p/w185/和 {item.backdrop_path}，它提供了链接的其余部分？例如最后它应该看起来像: http://image.tmdb.org/t/p/w185/bcRFf5Qmw4XotFYAfj8fCS8PJy5.jpg

这是代码本身:

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>
    )
  }
}

现在它可以很好地显示标题、发布日期和投票，但我无法获取网址。数据来自themoviedb: http://api.themoviedb.org/3/discover/movie?certification_country=US&certification=R&sort_by=vote_average.desc&api_key=79eb5f868743610d9bddd40d274eb15d

如果我的解释很糟糕并且我需要提供更多信息，请告诉我。

Answer 1

您想在 JSX 中连接字符串吗？方法如下:

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

或者，在 ES6 中您可以使用 Template Literals ，像这样:

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

<小时/>

结果的简单演示，here 。 (检查元素以查看 src url。)