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

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 or template strings inside expressions

例如

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

或

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

希望对您有所帮助。

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

NextJS - How to add a parameter in the link of an image inside a loop

node.js

dictionary

next.js