Javascript 在HTML画布上加载图像时处理404 inside Image.onerror

我编写了一些Javascript代码来加载图像（由最终用户上传），如下所示：

var img = new Image;
var ctx = _this.canvas.getContext('2d');
img.onload = function(){
  ctx.drawImage(img, 0, 0, img.width, img.height);
  //do other stuff..    
}
img.onerror = function(event){
  bootbox.alert("Error loading the image!");
}
img.src = Settings.URL + '/images/loadimage/?imageKey=' + imageKey;

如果与

imageKey

对应的图像不存在，则服务器返回404响应，在其他错误场景中，它还返回错误500

这段代码工作正常，但我想做的是在以下两种不同的情况下显示两条不同的消息：

当我得到404响应时

当错误500响应时

我无法弄清楚的是-如何在

img.onerror

中获取响应代码。没有提供有关所发生错误类型的任何信息。参考“image.onerror处理程序将接收一个不包含任何错误原因信息的事件参数”

您将发现一些关于如何处理可能不存在的图像加载的提示。在您的情况下，一个快速解决方案是使用XMLHttpRequest加载映像，您可以访问网络状态：

let imageReq = new XMLHttpRequest();
imageReq.open("GET", Settings.URL + '/images/loadimage/?imageKey=' + imageKey, true);
imageReq.responseType = "blob";

imageReq.onload = function(imageEvent) {
  // the variable below will contain your image as BLOB data
  var blob = imageReq.response;

  let img = new Image;
  let ctx = _this.canvas.getContext('2d');

  img.onload = function() {
    ctx.drawImage(img, 0, 0, img.width, img.height);
    //do other stuff..    
  }

  let urlCreator = window.URL || window.webkitURL;
  let imageUrl = urlCreator.createObjectURL(blob);
  img.src = imageUrl;
};

imageReq.onreadystatechange = function (imageEvent) {  
  if (imageReq.readyState === 4) {  
    if (imageReq.status === 200) {  
      // image has been loaded correctly
    } else if (imageReq.status === 404) {  
      console.log("Image not found");  
    } else if (imageReq.status === 500) {
      console.error("An error occurred:", imageReq.statusText);
    }
  }  
};

imageReq.send(null);

---

感谢您的详细回答和解释，我尝试了代码，它在404的情况下工作，但在图像实际存在的情况下，我在这行中得到了一个错误：

img.src=blob

GET/[object%20Blob]404（未找到））

请给出建议。我做了更多的谷歌搜索，找到了上述问题的解决方案。。当我替换line

img.src=blob时，它工作在代码中使用以下行：
var urlCreator=window.URL | | window.webkitURL；var imageUrl=urlCreator.createObjectURL（blob）；img.src=imageUrl工作正常。我会接受你的答案，一旦你编辑它相应。再次感谢我的错误；我修正了密码。必须先将blob转换为URL，然后才能访问它。