Отображение альтернативного изображения, если img src не работает должным образом

Question

Я работаю над веб-страницей, и у меня есть эта функция, которая показывает рис дня родительского сайта

function LoadPage() { 

var today = new Date(); 

var yyyy = today.getFullYear(); 

var mm = today.getMonth()+ 1; 

var dd = today.getDate(); 

var url="http://myparentsite"+yyyymmdd+"/image.jpg";
document.getElementById("img").setAttribute("src",url);

}

Картинка дня обычноустановить утром, поэтому у меня проблема с полуночи до 7-8 утра. В эти часы браузер покажет "?""изображение не найдено".Как я могу установить его, чтобы показать изображение накануне?Я пытался

var dd2 = today.getDate() -1; 

var url2="http://myparentsite"+yyyymmdd2+"/image.jpg";

, но я не знаю, как справиться с этим в функции и в HTML.

Answer 1

Простой ответ заключается в том, чтобы родительский сайт ссылался на постоянное местоположение изображения, когда у вас есть новое дневное изображение, затем перезапишите изображение новым и заархивируйте старое дневное изображение.

<img src='http://myparentsite/imageOfTheDay.jpg'/>

в противном случае вы можете проверить ошибку и установить для нее вчерашнее изображение

document.getElementById("img").onError = function() {
   var dd2 = today.getDate() -1; 

   var url2="http://myparentsite"+yyyymmdd2+"/image.jpg";

   document.getElementById("img").setAttribute("src",url2);
}

или проверьте дату запроса и определите, какое изображение показывать

 var now = new Date();
 var now_utc_hour = now.getUTCHours();

 url = "http://myparentsite"+yyyymmdd+"/image.jpg";

 if( now_utc_hour > 7 && now_utc_hour < 8 ) "http://myparentsite"+yyyymmdd2+"/image.jpg";

 document.getElementById("img").setAttribute("src",url);

Answer 2

Попробуйте:

    <img src="http://myparentsite/imageOfTheDay.jpg" alt="" onerror="this.src='http://myparentsite/alternateImageOfTheDay.jpg'"/>

-Arpit

Answer 3

В основном вам нужно обработать событие на изображении.

document.getElementById("img").onError = function() {
    // the image didn't load properly, change the src attribute
    document.getElementById("img").setAttribute("src", url2);
}

document.getElementById("img").setAttribute("src",url);