如何讓我的圖像顯示在頁面的主顯示幕上？

Question

我想做的是使用 NASA API 接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。

我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用 HTML5 及以上版本的模板網站。我對程式碼不太熟悉。非常感謝任何幫助。

因此，網站的工作方式似乎是它採用圖像 src 和標籤 href 值來將它們顯示在縮圖和主顯示中。我正在使用 fetch 請求來獲取 NASA API 資訊。然後我使用 data.map 方法覆寫 HTML 程式碼並插入我自己的 HTML。

我的想法是，如果我用獲取請求中的 HTML 覆蓋先前的 HTML，它會正常工作。但事實並非如此。

還附上一個replit連結以即時查看整個網站：https://replit.com/@jamesYamez/nasa-api#nasa-api-site/index.html

#我認為主要錯誤是

未捕獲類型錯誤：newSlide 未定義

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/樣式需要充分調整圖片大小

        
    



    
    
sssccc

編輯：使用模式在同一頁面中開啟圖像

    
    
    
    

sssccc


        
        



        
    
sssccc