How do I get my image to appear on the page's main display?

Question

What I want to do is receive some photos using the NASA API. These photos are then displayed on my page's thumbnail and main display.

I just figured out why the code doesn't get the image from the thumbnail and display it on the page. I also use template websites in HTML5 and above. I'm not very familiar with the code. Any help is greatly appreciated.

So the way the site seems to work is that it takes the image src and tag href values ​​to display them in both the thumbnail and the main display. I'm using fetch requests to get NASA API information. I then use the data.map method to overwrite the HTML code and insert my own HTML.

My idea is that if I overwrite the previous HTML with the HTML from the get request, it will work fine. but it is not the truth.

Also attached is a replit link to view the entire site in real time: https://replit.com/@jamesYamez/nasa-api#nasa-api-site/index.html

I think the main mistake is

Uncaught TypeError: newSlide is not defined

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

You can try this code, but your css/styles will need to adequately resize the image

        
    



    
    
sssccc

Edit: Use modal to open image in same page

    
    
    
    

sssccc


        
        



        
    
sssccc