Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman?

Question

Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan API NASA. Foto-foto ini kemudiannya dipaparkan pada lakaran kecil halaman saya dan paparan utama.

Saya baru tahu sebab kod tidak mendapat imej daripada lakaran kecil dan memaparkannya pada halaman. Saya juga menggunakan tapak web templat dalam HTML5 dan ke atas. Saya tidak begitu biasa dengan kod itu. Sebarang bantuan amatlah dihargai.

Jadi, cara tapak kelihatan berfungsi ialah ia memerlukan imej src dan nilai tag href untuk memaparkannya dalam lakaran kecil dan paparan utama. Saya menggunakan permintaan pengambilan untuk mendapatkan maklumat API NASA. Saya kemudian menggunakan kaedah data.map untuk menulis ganti kod HTML dan memasukkan HTML saya sendiri.

Idea saya ialah jika saya menulis ganti HTML sebelumnya dengan HTML dalam permintaan get, ia akan berfungsi dengan baik. tetapi ia bukanlah kebenaran.

Turut dilampirkan pautan ulangan untuk melihat keseluruhan tapak dalam masa nyata: https://replit.com/@jamesYamez/nasa-api#nasa-api-site/index.html

Saya rasa kesilapan utama ialah

Uncaught TypeError: newSlide tidak ditakrifkan

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

Anda boleh mencuba kod ini tetapi css/gaya anda perlu mengubah saiz imej dengan secukupnya

        
    



    
    
sssccc

Edit: Gunakan modal untuk membuka imej dalam halaman yang sama

    
    
    
    

sssccc


        
        



        
    
sssccc