Vue: Как получить размер изображения до загрузки?
В div добавлено несколько изображений. Как получить их размер для компоновки? Использовать асинхронность и promise?
Ответы (1 шт):
Автор решения: Vladimir
→ Ссылка
Попробуй вот так:
let urls = [
'https://images.unsplash.com/photo-1582294543473-8d081fd6e0f7?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ',
'https://images.unsplash.com/photo-1582997906901-9eb29cce0c14?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'
];
let _urls = urls.map((url, index) => {
return new Promise(function(res) {
let img = new Image();
img.addEventListener('load', () => {
res({size: {width: img.width, height: img.height, url: url, index: index}})
});
img.src = url;
});
});
Promise.all(_urls)
.then( val => {
console.log(val)
})
Собственно у тебя наверно массив с урлами картинок есть, ну и в create вызови метод, который у тебя будет получать данные об изображениях.