You might not be able to get high-resolution images all the time. Also, for some book results, you might not get any images at all.
I am working on a similar project and I had to manually check the resolution of each of the images I got in the response and I chose only the 'good' ones.
Here's what I had to do:
let newArr = [];
let lowResImage = 0;
let dataWithoutImage = 0;
let highResImage = 0;
genreResults?.forEach((book, index) => {
if (book?.volumeInfo?.imageLinks?.smallThumbnail) {//the current book has an image
mypromise(book.volumeInfo.imageLinks.smallThumbnail).then((res) => {
++highResImage;
newArr.push(book)
}).catch(error => {
++lowResImage;
}).finally(() => {
if (dataWithoutImage + highResImage + lowResImage === genreResults.length) {
console.log("---------data populated----------");
console.log("highResolutionImages", highResImage);
console.log("low resolution images:", lowResImage);
console.log("booksWithoutImages", dataWithoutImage);
console.log("genreResults size", genreResults.length)
setBooks(newArr)
}
});
}
else //this book does not contain an image
++dataWithoutImage
})
The function to check the resolution looks like this:
let mypromise = function checkImageResolution(url) {
return new Promise((resolve, reject) => {
var img = new Image();
img.src = url;
img.onload = function () {
console.log("image dimensions", this.width, this.height);
if (this.width < 125 || this.height < 100) //if either of these is true, reject the image
reject("low quality image");
else
resolve("high quality ,let's have this one");
}
});
}
