Home

Fetch images with $.getJSON()

Image by Paul Jarvis
Image © Paul Jarvis
Category: nature
Image by Wojtek Witkowski
Image © Wojtek Witkowski
Category: city
Image by Mark Doda
Image © Mark Doda
Category: closeup
Image by Vadim Sherbakov
Image © Vadim Sherbakov
Category: building
Image by Steven Spassov
Image © Steven Spassov
Category: closeup
Image by Charlie Foster
Image © Charlie Foster
Category: closeup
Image by Vadim Sherbakov
Image © Vadim Sherbakov
Category: night
Image by Vadim Sherbakov
Image © Vadim Sherbakov
Category: building
Image by Paul Jarvis
Image © Paul Jarvis
Category: nature
Image by Rick Waalders
Image © Rick Waalders
Category: nature
Image by Paul Jarvis
Image © Paul Jarvis
Category: closeup
Image by Nick Turner
Image © Nick Turner
Category: closeup 
const url = 'https://my-json-server.typicode.com/pverhaert/itf-api/picsum';

$.getJSON(url)
    .done((images) => {
        images.forEach((image) => {
            $('#imgContainer').append(`
                    <div class="card">
                      <img src="${image.url}/600/400" class="section media" alt="Image by ${image.author}">
                      <div class="section">
                        Image &copy; <a href="https://unsplash.com/photos/${image.meta.unsplash}" target="_blank">${image.author}</a>
                        <br>
                        Category: ${image.category}
                      </div>
                    </div>
                `);
        });
    })
    .catch((error) => {
        console.error('API not resolved!', error);
    })
    .always(() => {
        $('.spinner').hide();
    });