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

Question

我的对象 movie.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} />

印刷屏幕

完整代码

  <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

您需要在表达式内使用字符串连接或模板字符串

例如

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

或者

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

希望这可以帮助。