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:- enter image description here

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

possible duplicate of [Inputting a default image in case the src arribute of an html is not valid?](http://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-arribute-of-an-html-img-is-not-valid) — Shawn Erquhart, Nov 12 '13 at 14:30
possible duplicate of [jQuery/Javascript to replace broken images](http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images) — CodeCaster, Nov 12 '13 at 14:32

score 30 · Answer 1 · answered Nov 12 '13 at 14:30

30

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.

answered Nov 12 '13 at 14:30

SW4

69,876
20
132
137

2

+1 though I fear [if error.jpg does not exist](http://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-arribute-of-an-html-img-is-not-valid#comment21349757_980948) – Praveen Nov 12 '13 at 14:33
+1 Thanks @SW4 (and John John for asking the question) saved me a bunch of time/code/experimentation/failure/heartbreak. – Jim May 05 '15 at 08:58
3

Perhaps `onerror="this.onerror = null; this.src='path/to/replacement/image.jpg'"` – Rodrick Chapman Nov 03 '16 at 18:49

John H · Accepted Answer · 2013-11-12T15:16:00.727

8

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)" />

edited Nov 12 '13 at 15:16

answered Nov 12 '13 at 14:45

John H

14,422
4
41
74

1

but where it is better to create this class, under the Controller folder or under the Model folder ? thnaks – Nov 12 '13 at 21:04
1

@JohnJohn I tend to create a new folder called `Extensions` or `Helpers` and put it in there. In order for that to work though, you'd need to add the namespace to your `~/Views/Web.config` file (make sure it's that one and not the `Web.config` in the root of your project). Just look for the element ``. In there, you'll find a few namespaces already added. Under those, you'd add something like: ``. – John H Nov 12 '13 at 21:10

score 0 · Answer 3 · answered Nov 12 '13 at 14:35

You can try to add some js, for example add an event listener to img tag:

<img id="something" data-isloaded="false" onload="$(this).data('isloaded', 'true')" />

Then you can check if image is loaded:

if ($('#myimage').data('isloaded') === 'false' ) {
    // not loaded, do stuff here
    // add some replacement thumbnail
    // or set background image to the parent element
}

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

3 Answers3

Linked