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 replies (on page 1 of 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?

Global

s focus the search bar
p open profile menu
esc close an open window
? open keyboard shortcut window

On media pages

b go back (or to parent when applicable)
e go to edit page

On TV season pages

(right arrow) go to next season
(left arrow) go to previous season

On TV episode pages

(right arrow) go to next episode
(left arrow) go to previous episode

On all image pages

a open add image window

On all edit pages

t open translation selector
ctrl+ s submit form

On discussion pages

n create new discussion
w toggle watching status
p toggle public/private
c toggle close/open
a open activity
r reply to discussion
l go to last reply
ctrl+ enter submit your message
(right arrow) next page
(left arrow) previous page