如果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);