The Movie Database Support

Hi I'm having trouble rendering the backdrop_path and poster_path image in my application. The call returns 200 but when I try to display the image the return is with error 500.

Console image

It's the first time I'm using TMDB so any help is welcome. Thank you all.

Here is the call:

https://api.themoviedb.org/3/movie/550?api_key={my_api_key}&language=en-US

Callback:

{adult: false, backdrop_path: "/mMZRKb3NVo5ZeSPEIaNW9buLWQ0.jpg", belongs_to_collection: null,…}

I'm using Reactjs to build a menu page similar to that of Netflix. Please disregard indentation errors. My code:

<div className="container">
   <div className="row">
     {movies.map(item => (
         <div className="" key={item.data.id}>
             <p>{item.data.title}</p>
             <img src={item.data.backdrop_path} alt={item.data.title} className="d-block w-100" />
        </div>
      ))}
    </div>
</div>

3 svar (på sida 1 av 1)

Jump to last post

Hi @ligiaas, that console error shows you trying to load the image from your localhost server, which I suspect is not what you want to be doing.

You can read the docs here, that describe how you can build a valid image URL.

<img src=https://image.tmdb.org/t/p/w500{item.data.backdrop_path} alt={item.data.title} className="d-block w-100" />

For example.

And how do I render the most popular movie images? Render listing images in general?

The sure thing would be to get the url from the movie and not from localhost, right?

@travisbell please helpe me again! And how do I render the most popular movie images? Render listing images in general? The sure thing would be to get the url from the movie and not from localhost, right?

Kan du inte hitta en film eller tv-serie? Logga in för att skapa den.

Globala

s fokus på sökrutan
p öppna profilmenyn
esc stäng ett öppet fönster
? öppna tangentbordsgenväg fönstret

På mediasidor

b gå tillbaka (eller till förälder när det är tillämpligt)
e gå till redigerings sidan

På tv-säsongssidor

(höger pil) gå till nästa säsong
(vänster pil) gå till den föregående säsongen

På tv-avsnittssidor

(höger pil) gå till nästa avsnitt
(vänster pil) gå till föregående avsnitt

På alla bildsidor

a öppna lägg till bild fönstret

På alla redigeringssidor

t öppna översättnings väljaren
ctrl+ s skicka förmulär

På diskussionssidor

n skapa ny diskussion
w växla sedd-status
p växla offentligt/privat
c växla stäng/öppna
a öppna aktivitet
r svara på diskussionen
l gå till det senaste svaret
ctrl+ enter skicka ditt meddelande
(höger pil) nästa sida
(vänster pil) föregående sida

Inställningar

Vill du betygsätta denna artikel eller lägga till den i en lista?

Logga in