How to show image not found in Asp.net MVC

Question

I have an asp.net mvc project. in special views, I name four images from different different folders inside my project.

Some image could not be found. I want to set an image for each folder, because all 4 folders contain different even sizes of the image, so I need to set an image of a certain size for each folder.

how can I show the default image when the image does not find a way to do this. I mean calling none.png when there is no image in the directory that I called in the views.

- This is their way to display the image if the image is not found.

in any way do this in asp.net 4 MVC 3. using web.config or install something else.

Answer 1

The easiest way to do this is with the html helper. Please remember the additional success of checking the file system, even showing the image file name. The hit is small, but you will not notice any problems if you have too high traffic. Then you can implement some kind of caching so that the application “knows” if the file exists or not.

You can use a special 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 opinion, you can simply use the URL:

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

EDIT: As Jim noted, I really did not address the issue of sizes. Personally, I use automatic size / size request management, which is a completely different story, but if you are concerned about the folder / sizes, just pass this information on 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 opinion, you can simply use the URL:

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

Enum was suggested for better program management if the folder is a fixed set, but for a quick and nasty approach, and not for the reason why you can't just use a line if the folder is generated by db, etc.

Answer 2

I don’t know that there is a lot of MVC, but here is my idea nonetheless:

Have a specific controller that retrieves an image based on your logic. Just as Michael said that something (the image) returned to a successful audit - this means that if the image is found. If not found, return status code 404 or something like that.

Handle the rest through javascript on the client. So in the img tag, write something for the onerror event. The img source may be replaced with your image not found in the poster image file. Here are some (but not quite) how to do this through jquery.

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

PS: http://jsfiddle.net/Fy9SL/2/ if you are interested in a full demonstration 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 the controller action return FileResult and accept a parameter of type string , which describes the image path.

The controller action tries to load the image from the disk and return it as a FileResult , or if the file is not on the disk, instead return the "owner not found" image.

Then, to display the image (or its placeholder), you must set the src attribute of your img element to the action of the controller, and not to the image directly.