search

Home  >  Q&A  >  body text

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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粉338969567P粉338969567320 days ago814

reply all(1)I'll reply

  • P粉555696738

    P粉5556967382024-04-07 00:55:23

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

    1

    2

    3

    4

    5

    6

    7

            <!--display fetched user data -->

        <div id="NASA">

     

     

        </div>

         

    sssccc

    Edit: Use modal to open image in same page

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Document</title>

     

    sssccc

     

     

            <!--display fetched user data -->

            <div id="NASA">

     

     

            </div>

         

    sssccc

    reply
    0
  • Cancelreply