Массив Vue.js путается после перезагрузки данных

Ответ хороший, но он вводит одну проблему. Всякий раз, когда вы напрямую назначаете onload или onerror, он может заменить обратный вызов, который был назначен ранее. Вот почему есть хороший метод, который "регистрирует указанный прослушиватель на EventTarget, на который он вызывается" , как говорят на MDN . Вы можете зарегистрировать столько слушателей, сколько хотите, в одном и том же событии.

Позвольте немного переписать ответ.

function testImage(url) {
    var tester = new Image();
    tester.addEventListener('load', imageFound);
    tester.addEventListener('error', imageNotFound);
    tester.src = url;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

Поскольку процесс загрузки внешних ресурсов асинхронен, было бы еще лучше использовать современный JavaScript с обещаниями, такими как:

function testImage(url) {

    // Define the promise
    const imgPromise = new Promise(function imgPromise(resolve, reject) {

        // Create the image
        const imgElement = new Image();

        // When image is loaded, resolve the promise
        imgElement.addEventListener('load', function imgOnLoad() {
            resolve(this);
        });

        // When there's an error during load, reject the promise
        imgElement.addEventListener('error', function imgOnError() {
            reject();
        })

        // Assign URL
        imgElement.src = url;

    });

    return imgPromise;
}

testImage("http://foo.com/bar.jpg").then(

    function fulfilled(img) {
        console.log('That image is found and loaded', img);
    },

    function rejected() {
        console.log('That image was not found');
    }

);