Можно загрузить изображение, но не удается получить размер с помощью Image.getSize()
Я новичок в реагировании на нативный код, но некоторое время использую JavaScript. Я пытаюсь получить соотношение сторон, чтобы мои изображения выглядели красиво, используя Image.getSize, но постоянно получаю следующее предупреждение:
Failed to get size for image: https://books.google.com/books/content?id=NYMD0AEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api
Вот мой код, в котором я реализую getSize:
const handleIsbnSearch = async () => {
const books = await isbnSearch(isbn);
if (books.error) {
return setBookSearch([]);
}
let bookInfo = [];
for (let b in books) {
const volInfo = books[b].volumeInfo
const {width, height} = await Image.getSize(volInfo.imageLinks.thumbnail);
const aspectRatio = width/height;
console.info(aspectRatio);
bookInfo.push({
title: volInfo.title,
subtitle: volInfo.subtitle,
authors: volInfo.authors,
publisher: volInfo.publisher,
publishedDate: volInfo.publishedDate,
description: volInfo.description,
categories: volInfo.categories,
thumbnail: volInfo.imageLinks.thumbnail,
aspectRatio: aspectRatio
})
}
setBookSearch(bookInfo);
}
Я знаю, что URI правильный, потому что я могу загрузить фотографию в приложение, но по какой-то причине оно не может получить размер изображения.
Любая помощь будет оценена по достоинству!
Я попробовал заменить «http» на «https», но это, похоже, не имело никакого значения. Изначально я не использовал await при вызове Image.getSize(), и мне пришлось перейти с цикла forEach на цикл for. Я также пробовал вызывать этот метод в других местах кода и пробовал разные uri.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Используя приведенный ниже javascript, я могу получить размер изображения, возможно, это вам поможет.
var url = "https://books.google.com/books/content?id=NYMD0AEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api"
const getData = (url, cb) => {
const myImg = new Image();
myImg.onload = () => cb(null, myImg);
myImg.onerror = (err) => cb(err);
myImg.src = url;
};
getData(url, (err, myImg) => {
console.info(myImg.width + " X " + myImg.height);
});Image.getSize не возвращает Promise. Поэтому вы не можете вызвать его с помощью ожидания. Он принимает три параметра: uri, success обратный вызов и failure обратный вызов.
Для получения дополнительной информации перейдите по ссылке .
Вот пример использования getSize
const imageSource = useMemo(() => {
return data.thumbnailUrl;
}, [data.thumbnailUrl]);
useEffect(() => {
if (imageSource) {
Image.getSize(imageSource, (width, height) => {
console.info('Image size:', width, height);
});
}
}, [imageSource]);
Вместо получения размера при вызове API вы можете рассмотреть возможность получения его в своем компоненте.
const fetchImageSize = async () => {
try {
const { width, height } = await new Promise((resolve, reject) => {
Image.getSize(imageUrl, (width, height) => {
resolve({ width, height });
}, (error) => reject(error));
});
setWidth(width);
setHeight(height);
} catch (error) {
console.error('Failed to get size for image:', error);
}
};
Я написал эту функцию, чтобы лучше объяснить ее вам. В реакции нативная функция Image.getSize использует обратный вызов. Чтобы получить размеры, вы можете обернуть Image.getSize в объект обещания и определить из него ширину и высоту.
Я проверил этот код по вашей ссылке на своем компьютере, и он сработал.
Также стоит отметить, что в вашем коде нет обработчиков ошибок, что может помочь при отладке таких функций. Лучше хранить все в try{}catch(error){}
Это то, что я в конечном итоге использовал, поскольку мог легко взять ваш код и адаптировать его! Спасибо!
Ах, вот чего мне не хватало! Спасибо!