Ich möchte einige Fotos über die NASA-API erhalten. Diese Fotos werden dann im Miniaturbild und auf der Hauptanzeige meiner Seite angezeigt.

Ich habe gerade herausgefunden, warum der Code das Bild nicht aus der Miniaturansicht abruft und auf der Seite anzeigt. Ich verwende auch Vorlagen-Websites in HTML5 und höher. Ich bin mit dem Code nicht sehr vertraut. Jede Hilfe wird sehr geschätzt.

Die Seite scheint also so zu funktionieren, dass sie die Bild-SRC- und Tag-Href-Werte verwendet, um sie in Miniaturansichten und in der Hauptanzeige anzuzeigen. Ich verwende Abrufanfragen, um NASA-API-Informationen abzurufen. Anschließend verwende ich die Methode data.map, um den HTML-Code zu überschreiben und meinen eigenen HTML-Code einzufügen.

Meine Idee ist, dass es gut funktioniert, wenn ich den vorherigen HTML-Code mit dem HTML in der Get-Anfrage überschreibe. aber es ist nicht die Wahrheit.

Außerdem ist ein Replikat-Link beigefügt, um die gesamte Website in Echtzeit anzuzeigen: https://replit.com/@jamesYamez/nasa-api#nasa-api-site/index.html

Ich denke, der Hauptfehler ist

Uncaught TypeError: newSlide ist nicht definiert

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