Showing alternative image if img src is not working properly

Question

I'm working on a web page and I have this function which is showing the pic of the day of a parent site

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

}

The pic of the day is usually set in the morning so I've a problem between midnight and 7-8 am during those hours the browser will show the "?" of "image not found". How can I set it to show the image of the day before? I tried

var dd2 = today.getDate() -1; 

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

but I don't know how to handle it in the function and in the Html.

Chad Brown · Accepted Answer · 2012-01-24 00:46:57Z

Simple answer is have the parent site reference a constant image location, when you have a new daily image then overwrite the image with the new one and archive the old daily image.

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

otherwise you can check for an error and set it to yesterday's image

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

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

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

or check the date of the request and determine what image to show

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

SoWeLie · Accepted Answer · 2012-01-24 01:03:54Z

0

Basically, you need to handle an event on the image.

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

edited Jan 24, 2012 at 1:03

answered Jan 24, 2012 at 0:34

SoWeLie

1,40113 silver badges16 bronze badges

2 Comments

kahuna Over a year ago

I tried this but maybe I'm missing some code.Where should I call the url2 to show the alternative image?

SoWeLie Over a year ago

Edited my answer to include where you should include your second URL.

Arpit Aggarwal · Accepted Answer · 2014-07-27 11:43:45Z

0

Try This:

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

-Arpit

answered Jul 27, 2014 at 11:43

Arpit Aggarwal

29.5k16 gold badges97 silver badges110 bronze badges

Collectives™ on Stack Overflow

Showing alternative image if img src is not working properly

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related