How to display a default image in case the source does not exists

Question

I have the following code inside myasp.net MVC web application:-

 <a href="~/Content/uploads/@(item.ID).png"><img class="thumbnailimag" src="~/Content/uploads/@(item.ID).png"  /></a>   @Html.ActionLink(item.Name,"Details","DataCenter", new{id = item.ID},null)

And the following CSS:

.thumbnailimag {
    width:30px;
    height:30px;
    border:thin blue;
    background-image:url("/Content/uploads/virtual-data-center.jpg");
}

But if the image does not exists each bowser will treat it differently . I set a background image but still on IE it will display a “X” over the default image , as follow:-

Can anyone advice if there is a way to display a default image if the src does not exists?

Answer 1

Sure, for your images use:

<img src="fails/to/load.png" onerror="this.src='path/to/replacement/image.jpg'" />

There isnt a solution in CSS, it will require JS to be either applied to each <img> tag or a top level handler to replace the onerror event for all images.

Answer 2

It's far better to handle this server-side:

public static class HtmlHelperExtensions
{
    public static string ImageOrDefault(this HtmlHelper helper, string filename)
    {
        var imagePath = uploadsDirectory + filename + ".png";
        var imageSrc = File.Exists(HttpContext.Current.Server.MapPath(imagePath))
                           ? imagePath : defaultImage;

        return imageSrc;
    }

    private static string defaultImage = "/Content/DefaultImage.png";
    private static string uploadsDirectory = "/Content/uploads/";
}

Then your view is simplified to:

<img src="@Html.ImageOrDefault(item.ID)" />