Получить эскиз изображения в XMLHttprequest

Question

Я пытаюсь получить миниатюру изображения в своем XMLHttprequest, но при попытке получить сообщение об ошибке «Uncaught TypeError: Невозможно прочитать свойство« thumbnail »из undefined в XMLHttpRequest.xhr.onload (app. js: 73)». вопрос для infoLinks: Запрос

Может ли кто-нибудь помочь? Спасибо. вот мой код:

const btnRechercher = document.getElementById('btn-rechercher');

let bookSearch = document.querySelector('.modal-content').value; 
const listElement = document.querySelector('.list-books'); 
const template = document.getElementById('book-template');

function searchBookHandler () {

let title = document.getElementById('titre-livre').value;
let author = document.getElementById('auteur').value;
let search = title + author;

console.log(search);

const xhr = new XMLHttpRequest();


xhr.open('GET', "https://www.googleapis.com/books/v1/volumes?q=" + search);

xhr.responseType = 'json';

xhr.onload = function() {

const listOfBooks = xhr.response;
console.log(listOfBooks);

for (i=0; i < listOfBooks.items.length; i++) {

const postEl = document.importNode(template.content, true);
postEl.querySelector('.id').textContent = listOfBooks.items[i].id;
postEl.querySelector('.titre').textContent = listOfBooks.items[i].volumeInfo.title;
postEl.querySelector('.author').textContent = listOfBooks.items[i].volumeInfo.authors;
postEl.querySelector('img').textContent = listOfBooks.items[i].volumeInfo.imageLinks.thumbnail;

listElement.append(postEl);

  }

};

xhr.send();

}

btnRechercher.addEventListener ('click', searchBookHandler, false);