Как загрузить изображение на объект и установить по умолчанию, если ошибка? - PullRequest
Новая
       15

Как загрузить изображение на объект и установить по умолчанию, если ошибка?

0 голосов
/ 21 декабря 2018

У меня есть контейнер, куда я должен загрузить изображение.Изображение имеет фактическое изображение, которое уникально для каждого id.Если для этого идентификатора изображение не существует, оно должно загрузить изображение по умолчанию.Вот пример того, что у меня есть: 

function addImage() {
    var image = new Image();
    image.addEventListener('load', function () {
        this.src = 'images/'+id+'_image01.jpg';
    });
    image.addEventListener('error', function (e) {
        // Image not found, show the default
        image.src = 'images/default.jpg';
    });
    image.width = 233;
    console.log(image);
 }

Вывод функции выше в консоли выглядит так: 

<img width="233">

Единственный атрибут, который добавляется к объекту изображения, это width.Мне интересно, почему источник не добавлен.Это должно выглядеть так: 

<img width="233" src="images/89_image01.jpg"> //Image exist

или это, если изображение не существует: 

<img width="233" src="images/default.jpg"> //Image does not exist

Я не уверен, почему моя функция только придает ширину.Если кто-то может обнаружить проблему, пожалуйста, дайте мне знать.

1 Ответ

0 голосов
/ 21 декабря 2018

Вам необходимо добавить атрибут src к объекту изображения после выхода за пределы обработчика события onload, чтобы он фактически вызывал этот обработчик события или вызывал обработчик события onerror. 

function addImage(id) {
var image = new Image();
image.addEventListener('error', function onError (e) {
    // Image not found, show the default
    image.removeEventListener(error, onError);
    image.src = 'images/default.jpg';
});
image.width = 233;
image.src = 'images/'+id+'_image01.jpg';
console.log(image);

}

Кроме того, не забудьте удалить обработчик события onError после загрузки изображения по умолчанию, это избавит вас от нескольких проблем, если изображение по умолчанию не найдено.

...