Question

I’m trying to learn MVC3 razor but I’m hitting a snag whenever I try to display images that are stored on my local machine. The images are being displayed as an image placeholder (like below) instead of the browser rendering the image.

placeholder image

I’ve tried to simplify it down to just using a regular html img tag with no luck. However, everything works fine when it’s pointing to an image that’s hosted on the web. The path is correct because it’s showing that place holder instead of a red x (which it shows when it doesn’t find the image).

<img id="img" src="file:///C:/WebSite/Images/img1.jpg" alt="" />

The only thing I can think of is some sort of permissions or config that isn’t set up correctly. I’ve set the permissions for the folders leading to the image and the image itself. My Web.config is default and the only change I’ve made to global.aspx is registering routes.

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Home", action = "Trending", id = UrlParameter.Optional } // Parameter defaults
    );
}

Help?

Answer 1

You can use the Url.Content helper, assuming your Images folder is at the root of your application it would be something like :

<img id="img" src="@Url.Content("~/Images/img1.jpg")" alt="" />