ASP.NET unable to display image

Question

For reasons outside my control I have been requested to render a series of images on a web page (sort of a gallery view) based on a directory structure utilizing a UNC path. You'll note that I'm using relative paths as I work on this but will be deploying the site using UNC conventions.

I’ve created the following partial view to render the images, I can format later.

@model System.Collections.Generic.List<string>

@foreach (var image in Model)
{
    <div id="ptImage">
        <img src="@image" alt="@Path.GetFileName(image)"/>
    </div>
}

Where @image above represents the absolute path to the image needing to be rendered.

The paths displayed in view source of the page are what I feel I should be expecting back and truly define locally the location of the image. When accessing images via a relative path is this what others would expect?

<div id="gImg">
    <img src="C:\Projects\Test_Site\Site_1\ES3\ES3_0.bmp" alt="ES3_0.bmp" />
</div>
<div id="gImg">
    <img src=" C:\Projects\Test_Site\Site_2\ES4\ES4_0.jpg" alt="ES4_0.jpg" />
</div>

When the partial view loads I only see the alternative text of the image, not the image itself. A look at the IIS Express log tells me the following:

http://localhost:1348/TestGallery/ 404 0 2 6, This resource lead me to understand that 404 0 2 x seems to indicate the resource isn't found.

With that truly being the path to the file, what is IIS expecting as a valid input to locate the resource? I'm not sure how to phrase the question to perform a further search.

I think it is a permission problem. Try to use realtive path in the image tag like — aperezfals, Oct 20 '16 at 20:31

score 0 · Answer 1 · answered Oct 20 '16 at 20:43

The src paths in the img tags need to be web site URLs, not actual file locations on disk. Your web app should translate the URLs to grab the image from the appropriate location.

One possible solution:

Make a custom entry in your application's RouteConfig.cs to treat all items on a certain URL path dynamically. (In this example it is a separate controller.)
```
routes.MapRoute(
    name: "Images",
    url: "image/{*querypath}",
    new { controller = "Image", action = "Retrieve" }
    );
```
In the code that handles arbitrary query path, translate the relative URL (in querypath above) to the UNC path you're looking for and serve the image.
```
return File(UncRootPath + querypath, "image/png");
```

ASP.NET unable to display image

1 Answers1