how to show image not found in Asp.net MVC

Question

I have a asp.net mvc project. in a speicific views i call the four image from different different folder inside my proect.

sometime image can not be found. i want to set a image for every folder because all 4 folder contain different diffent size of image so i need to set the image of specific size for each folder.

how i can show the default image when the image not found any way to do that.i means call the none.png when the directory not have image who i called in the views.

are their any way to show the image in the case of image not found.

any way to do that in asp.net 4 MVC 3. using web.config or setting anything else.

Answer 1

Easiest way to do this is with a html helper. Please be mindful of the extra performace hit of checking the file system before even showing an image filename. The hit is a small one though, so you won't notice any issues unless you are getting very high traffic. Then you can implement some sort of caching so the app "knows" if the file exists or not.

You can use a custom html helper for it

public static class ImageHtmlHelpers
{
   public static string ImageUrlFor(this HtmlHelper helper, string contentUrl)
   {
       // Put some caching logic here if you want it to perform better
       UrlHelper urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
       if (!File.Exists(helper.ViewContext.HttpContext.Server.MapPath(contentUrl)))
       {
           return urlHelper.Content("~/content/images/none.png");
       }
       else
       {
           return urlHelper.Content(contentUrl);
       }
   }
}

Then in your view you can just make the url using:

<img src="<% Html.ImageUrlFor("~/content/images/myfolder/myimage.jpg"); %>" />

EDIT: As Jim pointed out, I haven't really addressed the sizing issue. Personally I use automatic size request management/size which is a whole other story, but if you are concerned about the folders/sizes simply pass that information in to build the path. As below:

public static class ImageHtmlHelpers
{
   public static string ImageUrlFor(this HtmlHelper helper, string imageFilename, ImageSizeFolderEnum imageSizeFolder)
   {
       UrlHelper urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
       string contentUrl = String.Format("~/content/userimages/{0}/{1}", imageSizeFolder, imageFilename);
       if (!File.Exists(helper.ViewContext.HttpContext.Server.MapPath(contentUrl)))
       {
           return urlHelper.Content(String.Format("~/content/userimages/{0}/none.png", imageSizeFolder));
       }
       else
       {
           return urlHelper.Content(contentUrl);
       }
   }
}

Then in your view you can just make the url using:

<img src="<% Html.ImageUrlFor("myimage.jpg", ImageSizeFolderEnum.Small); %>" />

Have suggested an Enum for better programmatic control if the folder is a fixed set, but for a quick and nasty approach, not reason why you can't just use a string if the folder is db generated etc.

Answer 2

Don't know all that much MVC, but here is my idea nonetheless:

Have a specific controller which fetches an image based on whatever your logic. Like Michael said have something (image) returned on a successful audit - meaning if image is found. If not found return a status code 404 or something like that.

Handle the rest via javascript on the client. So in the img tag write something for the onerror event. May be replace the img source w/ your image not found poster image file. Here somewhat (but not exactly) how to do that via jquery.

$(function(){
    $('#myimg').error(function(){
        $('#result').html("image not found");
    });
});

PS: http://jsfiddle.net/Fy9SL/2/ if u are interested in the full demo of jquery code.

Answer 3

    public static MvcHtmlString Image(this HtmlHelper helper, string src, string alt)
    {
        var builder = new TagBuilder("img");

        // Put some caching logic here if you want it to perform better
        UrlHelper urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
        if (!File.Exists(helper.ViewContext.HttpContext.Server.MapPath(src)))
        {
            src = urlHelper.Content("~/content/images/none.png");
        }
        else
        {
            src = urlHelper.Content(src);
        }

        builder.MergeAttribute("src", src);
        builder.MergeAttribute("alt", alt);
        return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
    }

Answer 4

You can make a controller action return a FileResult, and accept a parameter of type string which describes the image path.

The controller action tries to load the image from disk and return it as a FileResult, or if the file is missing from the disk, return a place holder 'image not found' image instead.

Then to display the image (or its placeholder) you would set the src attribute of your img element to the controller action rather than the image directly.