Soporte de The Movie Database

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 respuestas (en la página 1 de 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?

¿No encuentras una película o serie? Inicia sesión para crearla:

Global

s centrar la barra de búsqueda
p abrir menú de perfil
esc cierra una ventana abierta
? abrir la ventana de atajos del teclado

En las páginas multimedia

b retrocede (o a padre cuando sea aplicable)
e ir a la página de edición

En las páginas de temporada de televisión

(flecha derecha) ir a la temporada siguiente
(flecha izquierda) ir a la temporada anterior

En las páginas de episodio de televisión

(flecha derecha) ir al episodio siguiente
(flecha izquierda) ir al episodio anterior

En todas las páginas de imágenes

a abrir la ventana de añadir imagen

En todas las páginas de edición

t abrir la sección de traducción
ctrl+ s enviar formulario

En las páginas de discusión

n crear nueva discusión
w cambiar el estado de visualización
p cambiar público/privado
c cambiar cerrar/abrir
a abrir actividad
r responder a la discusión
l ir a la última respuesta
ctrl+ enter enviar tu mensaje
(flecha derecha) página siguiente
(flecha izquierda) página anterior

Configuraciones

¿Quieres puntuar o añadir este elemento a una lista?

Iniciar sesión