如何让我的图像显示在页面的主显示屏上？

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