Image.decode - это интерфейс асинхронного браузера, который должен предотвращать блокировку основного потока при декодировании и рисовании.
Что происходит, когда эти изображения инициализируются с помощью src? Браузер начинает их скачивать. Decode дает вам обещание знать, когда его можно безопасно вставить в DOM.
Но когда вы последовательно обрабатываете некоторое количество огромных изображений (как в примере, каждое из которых составляет около 4 Мб), оно иногда искажается. Не знаю почему, но размер и число имеют значение.
Я играл с вашим массивом изображений с простым кодом, как
imagesArray.forEach(function(img) {
var i = new Image();
i.src = img;
i.decode().then(function() {
console.log("decoded");
}).catch(function() {
console.log("error");
});
});
И ошибку легко получить с более чем 5-6 изображениями. Я бы предложил вместо этого использовать статические изображения (изображение Content-type).
В любом случае, Quazar использует this.__updateSrc(); для передачи значения src в backgroundImage. Именно поэтому фоны загружаются даже для случаев ошибок. Это заставляет браузер загружать эти изображения дважды! В случаях ошибки первая загрузка изображения с использованием декодирования не используется.
Если вы хотите устранить эту ошибку, закомментируйте строку с this.hasError = true внутри __ onError . Это свойство, когда true вызывает Vue, чтобы выдать ошибку для слота шаблона.
Кстати, в версии 1.0.0-rc.1 Quasar эта проблема решена , т.е. она будет загружаться без состояния ошибки.