CSS:
.posting-logo-div { }
.posting-logo-img { height:120px; width:120px; }
.posting-photo-div { height:5px;width:5px;position:relative;top:-140px;left:648px; }
.posting-photo-img { height:240px; width:240px; }
HTML:
<div id="image" class="posting-logo-div"><img src="../images/some-logo1.jpg" onerror="this.src='../images/no-logo-120.jpg';" class="posting-logo-img"></div>
<div id="photo" class="posting-photo-div"><img src="../images/some-logo2.jpg" onerror="this.src='../images/no-logo-240.jpg';" class="posting-photo-img"></div>
これはChromeまたはMozillaでは動作しないようですが、IEでは動作します。
これは動作します:
<img src="invalid_link"
onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
>
ライブデモ:http://jsfiddle.net/oLqfxjoz/
ニコラが以下のコメントで指摘したように、バックアップURLも無効である場合、一部のブラウザーは再び「エラー」イベントをトリガーし、無限ループが発生します。 this.onerror=null;
を介して「エラー」ハンドラーを無効にするだけで、これを防ぐことができます。
これは、特に文字列をonerror
条件画像URLと連結する必要があるユースケースで画像URLを返す予定の場合、実際には注意が必要です。 CSSでurl
パラメータをプログラムで設定することもできます。
トリックは、画像の読み込みが本質的に非同期であるため、onerror
が日曜日に発生しないことです。つまり、returnPhotoURL
を呼び出すと、すぐにundefined
bcs読み込みの非同期メソッドを返します。画像の読み込みの処理が始まったばかりです。
したがって、スクリプトをPromiseでラップしてから、以下のように呼び出す必要があります。注:私のサンプルスクリプトは他にもいくつかのことを行いますが、一般的な概念を示しています。
returnPhotoURL().then(function(value){
doc.getElementById("account-section-image").style.backgroundImage = "url('" + value + "')";
});
function returnPhotoURL(){
return new Promise(function(resolve, reject){
var img = new Image();
//if the user does not have a photoURL let's try and get one from gravatar
if (!firebase.auth().currentUser.photoURL) {
//first we have to see if user han an email
if(firebase.auth().currentUser.email){
//set sign-in-button background image to gravatar url
img.addEventListener('load', function() {
resolve (getGravatar(firebase.auth().currentUser.email, 48));
}, false);
img.addEventListener('error', function() {
resolve ('//rack.pub/media/fallbackImage.png');
}, false);
img.src = getGravatar(firebase.auth().currentUser.email, 48);
} else {
resolve ('//rack.pub/media/fallbackImage.png');
}
} else {
img.addEventListener('load', function() {
resolve (firebase.auth().currentUser.photoURL);
}, false);
img.addEventListener('error', function() {
resolve ('https://rack.pub/media/fallbackImage.png');
}, false);
img.src = firebase.auth().currentUser.photoURL;
}
});
}
とてもシンプル
<img onload="loaded(this, 'success')" onerror="error(this,
'error')" src="someurl" alt="" />
function loaded(_this, status){
console.log(_this, status)
// do your work in load
}
function error(_this, status){
console.log(_this, status)
// do your work in error
}