NextJS-如何在循环内的图像链接中添加参数

Question

我的对象Movies.map无法工作{movie.poster_path}

NextJs版本：6.1.1

行

<img className="card-img-top" src="http://image.tmdb.org/t/p/w185//{movie.poster_path}" alt={movie.title} />

printscreen

完整代码

  <div className="row">
    {movies.results.map((movie) => (
      <div className="col-3">
        <div className="card" styles={{ width: '18rem' }}>
          <img className="card-img-top" src="http://image.tmdb.org/t/p/w185//{movie.poster_path}" alt={movie.title} />
          <div className="card-body">
            <h5 className="card-title">{movie.title}</h5>
            <p className="card-text">{movie.overview}</p>
          </div>
        </div>
      </div>
    ))}
  </div>

Answer 1

您需要在concatenation内使用字符串template strings或expressions

例如

src={"http://image.tmdb.org/t/p/w185/" + movie.poster_path}

或

src={`http://image.tmdb.org/t/p/w185/${movie.poster_path}`}

希望这会有所帮助。