0
97
ViewsNo se pueden mostrar las imágenes de una API
Estoy usando una API para obtener información para una base de datos. Quiero que las imágenes se muestren a la derecha del texto, pero las imágenes no se muestran en absoluto. Probé varias teclas diferentes y todavía nada. Así es como se ve actualmente: 
Las imágenes no se muestran como se puede ver.
Aquí está el JS (está extrayendo los datos de aquí https://api.tvmaze.com/shows/347/episodes ):
// DATABASE const sunnyList = document.getElementById('sunnyList'); let sunnyInfo = []; searchBar.addEventListener('keyup', (e) => { const searchTarget = e.target.value.toLowerCase(); const filteredSunny = sunnyInfo.filter(sunny => { return sunny.name.toLowerCase().includes(searchTarget) || sunny.airdate.toLowerCase().includes(searchTarget) || sunny.airtime.includes(searchTarget) }); displayInfo(filteredSunny); }); const loadLayout = async () => { try { const res = await fetch('https://api.tvmaze.com/shows/347/episodes'); sunnyInfo = await res.json(); displayInfo(sunnyInfo); } catch (err) { console.error(err); } }; const displayInfo = (sunny) => { const htmlString = sunny .map((sunny) => { return ` <li class="character"> <div class="detail"> <h2>${sunny.name}</h2> <p>Season ${sunny.season} Episode ${sunny.number}</p> <p>${sunny.airdate}</p> <p>${sunny.airtime}</p> <p>${sunny.rating.average}</p> </div> <img src="${sunny.image}"></img> </li> `; }) .join(''); sunnyList.innerHTML = htmlString; }; loadLayout(); He probado sunny.image.medium y sunny.image.original pero sigue sin aparecer.
Cualquier ayuda es apreciada :)
2 answers
Answer question0
La image no es una cadena de URL, sino un objeto con la siguiente forma:
{ medium: string, original: string }donde ambas cadenas contienen las URL de las imágenes reales.
Para su caso de uso, el medium probablemente tenga más sentido, por lo que puede hacer esto:
<img src="${sunny.image?.medium}"></img>Editar
Se agregó un encadenamiento opcional porque algunos elementos no tienen propiedad de image .
0
El problema al que te enfrentas es que no todos los objetos tienen imágenes.
Por favor, prueba este código:
const displayInfo = (sunny) => { const htmlString = sunny .map((sunny) => { const img = sunny.image ? sunny.image.medium : "https://picsum.photos/200/300" return ` <li class="character"> <div class="detail"> <h2>${sunny.name}</h2> <p>Season ${sunny.season} Episode ${sunny.number}</p> <p>${sunny.airdate}</p> <p>${sunny.airtime}</p> <p>${sunny.rating.average}</p> </div> <img src=${img} /> </li> `; }) .join(''); sunnyList.innerHTML = htmlString; };