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 вызови метод, который у тебя будет получать данные об изображениях.

→ Ссылка