Question

我正在尝试使用JavaScript将图片附加到页面：

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

必须对用户进行身份验证才能看到此图像，如果不是，我想显示错误消息。不幸的是，服务器没有返回HTTP错误消息，而是将请求重定向到（大部分）空页面，因此我收到HTTP 200，但警告Resource interpreted as Image but transferred with MIME type text/html并且没有显示任何内容。< / p>

我该如何处理这个案子？如果用户未经过身份验证，我无法更改网络服务器所提供的内容。

Answer 1

在image.onload事件监听器中，检查image.width和image.height是否为零（最好是image.naturalWidth和image.naturalHeight，支持它们。< / p>

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

演示：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;
}

Answer 2

这是我的解决方案。如果我的404是我的图像 - 我尝试插入一个200 OK（Pure Javascript）的数组。图像必须在同一路径中。否则 - 我的func将返回＆＃39; no-image.png＆＃39;。 jQuery/JavaScript to replace broken images

image.onError事件永远不会触发，但图像不是有效数据 - 需要解决

2 个答案:

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