Question

我有应该在其中加载图像的容器。该图像具有每个id唯一的实际图像。如果该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

我不确定为什么我的函数仅附加宽度。如果有人可以检测到该问题，请告诉我。

Answer 1

您需要在onload事件处理程序之外添加src属性到图像对象，以便它实际上调用该事件处理程序或调用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事件处理程序，如果找不到默认图片，这将省去一些麻烦。

如何将图像加载到对象并在发生错误时设置默认值？

1 个答案: