Javascript 如果出现错误，如何将图像加载到对象并设置默认值？

我有一个容器，我应该加载图像。图像具有每个

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">

或者，如果图像不存在：

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

//图像不存在

---

我不知道为什么我的函数只附加了宽度。如果有人能检测到问题，请告诉我。

您需要在onload事件处理程序外部之后向image对象添加src属性，以便它实际调用该事件处理程序或onerror事件处理程序

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

}

---

此外，在加载默认映像后，不要忘记删除OneError事件处理程序，如果找不到默认映像，这将省去一些麻烦。

@MarkMeyer是否有其他方法来防止此问题？此外，您正在处理程序内设置

src

。处理程序在获得图像之前不会运行-只有具有src时才会获得图像。@MarkMeyer我不确定是否理解您的问题。有关代码示例，请参阅下面的答案。

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);