reactjsapithemoviedb-api

React: MovieDB API won't display movie poster


I am building an App that displays movies and their titles from the MovieDB API. Right now I'm getting everything to display based off the props I passed in

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

and my Component

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

But the movie poster is still not showing up. Not sure if this has something to do with my code or a problem with the API


Solution

  • Try:

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