Comment faire apparaître mon image sur l'écran principal de la page ?

Question

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))

Answer 1

Vous pouvez essayer ce code mais vos CSS/styles devront redimensionner correctement l'image

        
    



    
    
sssccc

Modifier : utilisez modal pour ouvrir les images dans la même page

    
    
    
    

sssccc


        
        



        
    
sssccc