我想做的是使用 NASA API 接收一些照片。然后在我的網(wǎng)頁的縮略圖和主顯示屏上顯示這些照片。
我只是弄清楚為什么代碼不從縮略圖中獲取圖像并將其顯示在頁面上。我還使用 HTML5 及以上版本的模板網(wǎng)站。我對代碼不太熟悉。非常感謝任何幫助。
因此,該網(wǎng)站的工作方式似乎是它采用圖像 src 和標簽 href 值來將它們顯示在縮略圖和主顯示中。我正在使用 fetch 請求來獲取 NASA API 信息。然后我使用 data.map 方法覆蓋 HTML 代碼并插入我自己的 HTML。
我的想法是,如果我用獲取請求中的 HTML 覆蓋之前的 HTML,它會正常工作。但事實并非如此。
還附上一個replit鏈接以實時查看整個網(wǎng)站: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))
您可以嘗試使用此代碼,但您的 css/樣式需要充分調(diào)整圖像大小
sssccc
編輯:使用模式在同一頁面中打開圖像
Document ssscccsssccc