Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint?

Question

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

Answer 1

您可以尝试使用此代码，但您的 css/样式需要充分调整图像大小

编辑：使用模式在同一页面中打开图像