Question

I am trying to create an application that will display images that are stored locally on the webserver. Here is what I have in my view, note that “entry” are absolute addresses like "C:\Images\Image1.jpg". However, when I run it, I get "Not allowed to load local resource: file:///C:/Images/ImageName.jpg" in the console log. So maybe it tries to access the image on the client. How do I tell my view to access the local webserver path and not look for the image source on the client? Please note that moving the images into project directory is not an option, because the images are stored on a different drive on the webserver.

<!-- language: c# -->
@model List<String>
<div style="height: 500px; overflow:scroll;">
<h2>
    ScreenShots for testMachine</h2>

@foreach (var entry in Model)
{          
   <div class="nailthumb-container square-thumb">
   <img alt="screenshot" src="@Url.Content(entry)" /> 

</div>
}
</div>

Answer 1

You cannot directly serve images outside of your ASP.NET MVC 3 application to the client. That would be a huge security vulnerability if the client could access arbitrary files on your server.

You will need to write a controller action that will return them and then point your src property of your <img> tags to this controller action.

public class ImagesController: Controller
{
    public ActionResult SomeImage()
    {
        return File(@"C:\Images\foo.jpg", "image/jpeg");
    }
}

and inside your view:

<img src="@Url.Action("SomeImage", "Images")" alt="" />

You could also pass the image name as parameter to the controller action:

public class ImagesController: Controller
{
    public ActionResult SomeImage(string imageName)
    {
        var root = @"C:\Images\";
        var path = Path.Combine(root, imageName);
        path = Path.GetFullPath(path);
        if (!path.StartsWith(root))
        {
            // Ensure that we are serving file only inside the root folder
            // and block requests outside like "../web.config"
            throw new HttpException(403, "Forbidden");
        }

        return File(path, "image/jpeg");
    }
}

and in your view:

<img src="@Url.Action("SomeImage", "Images", new { image = "foo.jpg" })" alt="" />