Me han encargado que construya una API que obtenga datos de la API pública de búsqueda de fotos de Flickrs y luego envíe estas imágenes a mi sitio web. He usado muchos videos de YouTube para probar y crear mi API porque soy totalmente nuevo en esto, solo he escrito HTML, CSS y Java básico.
Pero ahora, cuando inicié mi servidor http con npm, no se muestra ninguna imagen y aparece un error en la consola de Chrome. ¿Alguien podría ayudarme a poner esto en marcha? Gracias
let pagenr=1; let query =""; async function Photos(pagenr) { const data = await fetch( `https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f594577bccc78a7056049a0aaa2d1cc2&per_page=10&format=json&nojsoncallback=1&text=MarvelUniverse`, { method:"GET", headers : { Accept: "application/json", }, } ); const result=await data.json(); console.log(result); const pic=document.createElement("div"); document.querySelector(".gallery").appendChild(pic); }; Photos(pagenr);EDITAR: Intenté cambiar el .json a .text y el error desapareció, pero ahora obtengo la cadena json sin procesar de la API de Flickr. Quiero que json se convierta en un objeto para mostrar como una imagen en el HTML con el servidor http. ¡Cualquier ayuda es apreciada!
EDIT 2: Cambié la URL de la API y volví a .json y todo parece estar bien, pero no puedo mostrar nada en mi HTML.
El problema se debe a que dentro de la URL tiene jsoncallback=FlickrPhotoSearch que está diseñado para ayudar a invocar una función después de una llamada a la API. En realidad, esto significa que el tipo de respuesta ya no es JSON válido, lo que está causando el error que está viendo. Si desea obtener el JSON sin procesar, para la API de Flickr debe agregar nojsoncallback=1 y eliminar jsoncallback=FlickrPhotoSearch de la URL de la API.
Parecía haber publicado la URL con su clave de API incluida también, esto significaba que podía acceder al enlace usando sus credenciales de API y cualquier otra persona puede hacer lo mismo. Debe cambiar esta clave lo antes posible .