web-dev-qa-db-ja.com

image.onErrorイベントは発生しませんが、画像は有効なデータではありません-回避策が必要です

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そして何も表示されていません。

このケースをどのように処理できますか？ユーザーが認証されていない場合、ウェブサーバーが提供するものを変更することはできません。

javascripterror-handlingmime-types
20
Chris Sobolewski

の中に image.onloadイベントリスナー、image.widthおよびimage.heightは両方ともゼロ（できればimage.naturalWidthおよびimage.naturalHeight、サポートされている場合）。

幅と高さが両方ともゼロの場合、画像は無効と見なされます。

デモ： 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;
}
41
Rob W

これが私の解決策です。画像に404を指定した場合-200 OK（Pure Javascript）の配列の1つを挿入しようとします。画像は同じパスにある必要があります。それ以外の場合-私のfuncは「no-image.png」を返します。 壊れた画像を置き換えるjQuery/JavaScript

0
Дмитрий Дорогонов