Why is image not handled properly in ASP.NET deployed on local IIS

I have created a web app开发者_如何转开发 using ASP.NET 4 (Visual Studio 2010) MVC2 architecture and have deployed it to my local IIS server in a virtual directory EasyMan4. Now using the Solution Explorer I have added an image to the Content Folder. Following this, in the Site.Master page, I added a img tag as follows:

<img src="../../Content/HomeIcon.png" height="64" width="64" alt="Home" />

Please note that the css file is loaded as follows:

<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

In spite of the fact that both the .css and the .png files are in the same location, when viewing the site via http://localhost/EasyMan4/ the css loads properly while the png doesn't.

Launching the same project via the Visual Studio Development Server rendered the page perfectly. However, the IIS is not able to display the image properly.

On closer inspection I noticed that while the location of the css file in the chrome developer tools was http://localhost/EasyMan4/Content/site.css the location of the image was http://localhost/Content/HomeIcon.png.

Please note that since I am not fluent with the IIS manager, I have changed anything in the IIS manager, except for changing the IIS authentication type. Currently I have disabled all the authentication types except for the Windows Authentication. Please advise as to what I should do to get the images getting displayed properly

im MVC developer and can tell you, the MVC its a convention over configuration framework, and a best practice is put all the files in correct an ordered folder. For example, for Images, you can create a folder inside the Content directory call "Images" and put your images in there, same with CSS files, in a "CSS" or "stylesheet" directory. And then use the powerful helpers of the MVC framework.

For images use

<img src="<%= Url.Content( "~/Content/Images/HomeIcon.png" ) %>" height="64" width="64" alt="Home" />

and for stylesheets use

<link href="<%= Url.Content( "~/Content/CSS/Site.css" ) %>" rel="stylesheet" type="text/css" />

This way allow to you the same behavior in Visual studio while debugging and in the IIS

I hope the answer help you, and please mark as a correct answer if solve your problem

cya, Dario

I recommend creating some UrlHelper Extension methods so that you can keep everything consistent. This way you know where your images, css, and script files are at. Notice the use of the tilde "~" this means your path is starting at the root of the application.

public static class UrlHelperExtension
{

    public static string Stylesheet(this UrlHelper helper, string fileName)
    {
        return helper.Content(String.Format("~/content/css/{0}", fileName));
    }

    public static string Image(this UrlHelper helper, string fileName)
    {
       return helper.Content(String.Format("~/content/images/{0}", fileName));
    }

    //More helpful methods ....
}

and then to access them you do the following in your views

<img src="<%= Url.Image("HomeIcon.png") %>" alt="Home" />

<link href="<%= Url.Stylesheet("Site.css")%>" rel="stylesheet" type="text/css" />