Comment faire apparaître mon image sur l'écran principal de la page ?
Ce que je souhaite faire, c'est recevoir des photos en utilisant l'API de la NASA. Ces photos sont ensuite affichées sur la vignette et l'écran principal de ma page.
Je viens de comprendre pourquoi le code ne récupère pas l'image de la vignette et ne l'affiche pas sur la page. J'utilise également des modèles de sites Web en HTML5 et supérieur. Je ne connais pas très bien le code. Toute aide est grandement appréciée.
Donc, la façon dont le site semble fonctionner est qu'il prend les valeurs src de l'image et href de la balise pour les afficher dans les vignettes et l'affichage principal. J'utilise des requêtes de récupération pour obtenir des informations sur l'API de la NASA. J'utilise ensuite la méthode data.map pour écraser le code HTML et insérer mon propre code HTML.
Mon idée est que si j'écrase le code HTML précédent par le code HTML dans la requête get, cela fonctionnera correctement. mais ce n'est pas la vérité.
Vous trouverez également ci-joint un lien de réplication pour visualiser l'intégralité du site en temps réel : https://replit.com/@jamesYamez/nasa-api#nasa-api-site/index.html
Je pense que la principale erreur est
Uncaught TypeError : le nouveau slide n'est pas défini
fetch(url)
.then(req => req.json())
.then((data)=> {
//using map to assign the data values to the html
let html = data.map(item => `
<article>
<a class="thumbnail" href="${item.hdurl}" data-position="left center" target="_blank"><img src="${item.url}" alt="..." /></a>
<h2>${item.title}</h2>
<p>${item.explanation}</p>
</article>
`)
thumbnails.innerHTML = html.join("")
})
.catch((e) => console.error(e))