如果img src无法正常工作,则显示替代图像

时间:2012-01-24 00:26:50

标签: javascript html image

我在网页上工作,我有这个功能,显示父网站当天的图片

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中处理它。

3 个答案:

答案 0 :(得分: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);

答案 1 :(得分:0)

基本上,您需要处理图像上的事件。

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

答案 2 :(得分:0)

试试这个:

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

-Arpit

相关问题