如何讓我的圖像顯示在頁面的主顯示幕上?
P粉338969567
P粉338969567 2024-04-06 15:33:12
0
1
533

我想做的是使用 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))

P粉338969567
P粉338969567

全部回覆(1)
P粉555696738

您可以嘗試使用此程式碼,但您的 css/樣式需要充分調整圖片大小

        
    
sssccc

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



    
    
    
    Document

sssccc


        
        
sssccc
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!