reactjs React:MovieDB API无法显示电影海报

wvt8vs2t  于 2023-01-25  发布在  React
关注(0)|答案(2)|浏览(162)

我正在构建一个应用程序,它可以显示来自API的电影及其标题。现在,我正在根据传入的 prop 显示所有内容

<div className="movies">
    {movies.map(movie => (
      <Movies

        key={movie.id}
        title={movie.title}
        popularity={movie.popularity}
        release_date={movie.release_date}
        image={movie.poster_path}
      />
    ))}

   </div>

和我的组件

export default function Movies({title, popularity, release_date, image}) {
    return (
        <div className="movies-items">
            <h1>{title}</h1>
            <img src={image} alt = ""></img>
            <p>{popularity}</p>
            <p>{release_date}</p>

        </div>
    )
}

但是电影海报还是没有出现。不确定这是和我的代码有关还是API有问题

ipakzgxi

ipakzgxi1#

试试看:

export default function Movies({title, popularity, release_date, image}) {
    return (
        <div className="movies-items">
            <h1>{title}</h1>
            <img src={"https://image.tmdb.org/t/p/w500/"+image} alt = ""></img>
            <p>{popularity}</p>
            <p>{release_date}</p>
        </div>
    )
}
aurhwmvo

aurhwmvo2#

要显示所有动态数据,我们必须在值中使用“?”。
电影. map(电影=〉(

key={movie?.id}
    title={movie?.title}
    popularity={movie?.popularity}
    release_date={movie?.release_date}
    image={movie?.poster_path}
  />
))}

在数据值的“?”和.“”之间不给予空格。

相关问题