Your image logic is working. The icons/logo.svg probably isn't on the environment you're testing it on. Change icons/logo.svg to https://i.imgur.com/8UdKNS4.jpeg and it works.

For your second problem, the reason why you only get one result is because JavaScript doesn't know which id="results" it should select. After you create your content there is now two id="results". I changed id="results" inside your content variable to id="results_box" and got the rest of the results.

function bookSearch() {
    var search = document.getElementById('search-box').value
    document.getElementById('results').innerHTML = ""
    const fictionCards = document.getElementById('fiction-cards');
        while(fictionCards.children && fictionCards.children.length) {
            fictionCards.removeChild(fictionCards.children[0]);
        }
    document.getElementById('type').classList = "hide-cards";
      $.ajax({
        url: "https://www.googleapis.com/books/v1/volumes?q=" + search,
        dataType: "json",

        success: function(data) {
            for (i = 0; i< data.items.length; i++){
                const extractThumbnail = ({ imageLinks }) => {
                    const DEFAULT_THUMBNAIL = "https://i.imgur.com/8UdKNS4.jpeg";
                    if (!imageLinks || !imageLinks.thumbnail) {
                      return DEFAULT_THUMBNAIL;
                    }
                    return imageLinks.thumbnail.replace("http://", "https://");
                  };
                const card = document.createElement('div');
                card.classList="card";
                document.getElementById('top-today').classList = 'hide-cards';
                //card content
                const content = `
                <h1>Fiction</h1>
                <div class="card" style="margin:50px; width: 18rem;">
                <img class="card-img-top align-items-center mx-auto" src="${extractThumbnail(data.items[i].volumeInfo)}" style="width:170px; height:230px;" alt="">
                <div class="card-body" id="results_box">
                    <h5 class="card-title" style="font-weight:bold">${data.items[i].volumeInfo.title}</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <div class="d-flex">
                    <a href="#" class="btn btn-dark mx-2"  style="height:2.5rem;">Add</a>
                    <a href="${data.items[i].saleInfo.buyLink}"class="btn btn-dark" style="height:2.5rem;">Buy</a>
                    </div>
                </div> `;
                results.innerHTML += content;
            }
        }, 

        type: 'GET'
    });
}

Here's a working version of your code: https://jsfiddle.net/edvLpgct/2/