Detect Missing Image

[richmondwill]

Hello All, I hope this is a question with a simple solution that I've overlooked. I am loading an image reference (URL) into a ASP.NET image control when the page loads. The problem is that I'm loading a reference from an MLS system and the image link is occasionally broken. Is there a simple way to reference a property of the image control to tell if the image sucessfully loaded? If so, I can't find it. Currently I'm using code to detect if the URL is valid before setting the property of the image control. This requires a round trip to the image host server to detect a 404 response. It works, but is SLOW when there are more than a dozen pictures. I hate slow... Any help is appreciated. Cheers, Will

[LeeOvEngland]

Hi, Have you tried wrapping it in a Try - Catch statement. If it fails to load then the code will just carry on and you can use a default missing image or code in the catch part to do something else.

[richmondwill]

LeeOvEngland, The statement is wrapped in a Try - Catch. It merrily continues on even though an invalid picture url is assigned to the Image object's ImageUrl property. It seems strange that no event is raised in this scenario. Thanks, Will

[minhpc_bk]

Hi there, There are two simple ways come to mind: + Use client side script to detect a bronken link. As you already know that the image control is rendered as an img element at the client side. If the url specified in the src property is a broken link (missing image), the onerror event will be raised. So you basically can register an event handler for this event to set the default image in this case. The sample code in your web page is something like this:

function Image_OnError(obj)
{
obj.src = "Images/defaultPhoto.jpg";
}
...
<asp:Image onerror="Image_OnError(this);" id="Image1"
runat="server" ImageUrl="Images\myphoto.jpg"></asp:Image>

+ Use server side code to detect a broken link. You simply create a seperate web page which is resposible for detecting/loading the requested image, say ShowImage.aspx. In the Page_Load event, you just assign the ShowImage.aspx with the image url to the ImageUrl property of the image control:

private void Page_Load(object sender, System.EventArgs e)
{
string url = "http://localhost/WebApplication1/Images/MyPhoto.jpg";
url = Server.UrlEncode(url);
Image1.ImageUrl = "ShowImage.aspx?url=" + url;
...
}

The sample code for the ShowImage.aspx goes like this:

private void Page_Load(object sender, System.EventArgs e)
{
string url = Request.QueryString["url"];
url = Server.UrlDecode(url);
if(ImageExits(url)
{
LoadRequestedImage(url);
}
else
{
LoadDefaultImage();
}
}

Perhaps, you may want to use the first option because of the performance as you are expecting.