image.onError事件永远不会触发，但是图像不是有效的数据 - 需要解决 [英] image.onError event never fires, but image isn't valid data - need a work around

问题描述

  image = document.createElement（'img'）我想使用JavaScript将图片附加到页面; 
 image.onload = function（）{
 document.body.appendChild（image）; 
} 
 image.onerror = function（）{
 //显示错误
} 
 image.src ='http://example.com/image.png ; 
  

用户必须经过身份验证才能看到此图像，如果不是，我想显示错误信息。不幸的是，服务器没有返回HTTP错误消息，而是将请求重定向到（主要是）空的页面，所以我得到一个 HTTP 200 ，但警告资源解释为图像，但使用MIME类型文本/ html 传输，并且没有显示。

我如何处理这种情况？如果用户未通过身份验证，我无法更改网络服务器的服务。

解决方案

code> image.onload 事件侦听器，检查是否 image.width 和 image.height 都是零（最好是 image.naturalWidth 和 image.naturalHeight ，当它们被支持时） p>

如果宽度和高度均为零，图像将被视为无效。

演示： http://jsfiddle.net/RbNeG/

  //用法：
 loadImage（'notexist.png'）; 
 
函数loadImage（src）{
 var image = new Image; 
 image.onload = function（）{
 if（'naturalHeight'in this）{
 if（this.naturalHeight + this.naturalWidth === 0）{
 this。的onerror（）; 
 return; 
} 
} else if（this.width + this.height == 0）{
 this.onerror（）; 
 return; 
} 
 //此时，没有错误。 
 document.body.appendChild（image）; 
}; 
 image.onerror = function（）{
 //显示错误
 document.body.appendChild（
 document.createTextNode（'\\\
Error loading as image：'+ this。 src）
）; 
}; 
 image.src = src; 
} 
  

I am trying to append an image to a page using JavaScript:

image = document.createElement('img');
image.onload = function(){
    document.body.appendChild(image);
}
image.onerror = function(){
    //display error
}
image.src = 'http://example.com/image.png';

The user must be authenticated to see this image, and if they are not, I want to display an error message. Unfortunately, the server is not returning an HTTP error message, but rather redirect the request to a (mostly) empty page, so I am getting an HTTP 200, but the warning Resource interpreted as Image but transferred with MIME type text/html and nothing is displaying.

How can I handle this case? I don't have the ability to change what the webserver serves up if the user isn't authenticated.

解决方案

In the image.onload event listener, check whether image.width and image.height are both zero (preferably image.naturalWidth and image.naturalHeight, when they are supported).

If the width and height are both zero, the image is considered invalid.

Demo: http://jsfiddle.net/RbNeG/

// Usage:
loadImage('notexist.png');

function loadImage(src) {
    var image = new Image;
    image.onload = function() {
        if ('naturalHeight' in this) {
            if (this.naturalHeight + this.naturalWidth === 0) {
                this.onerror();
                return;
            }
        } else if (this.width + this.height == 0) {
            this.onerror();
            return;
        }
        // At this point, there's no error.
        document.body.appendChild(image);
    };
    image.onerror = function() {
        //display error
        document.body.appendChild(
            document.createTextNode('\nError loading as image: ' + this.src)
        );
    };
    image.src = src;
}

这篇关于image.onError事件永远不会触发，但是图像不是有效的数据 - 需要解决的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！