Routing images relative to views in Asp.Net MVC?

Question

I need to be able to place images in a path relative to the view, but I'm not sure how to accomplish this, because I don't have a very good grasp of MVC routing:

If I have a route like this:

routes.MapRoute(
                "Parameter",
                "{controller}/{action}/{lang}/{prod}",
                new { controller = "Manuals", action = "Product", lang = "en-US", prod = "productname" }

And then I try to use a relative path for the images:

<embed class="images src="@Url.Content("images/sampleimage.svg")"></embed>

This gives me a path (if I inspect it in the web inspector) that looks like this: src="http://localhost/Manuals/Product/en-US/images/sampleimage.svg"

which is not where the image is. It is located physically at "http://localhost/Views/Manuals/en-US/productname/images/sampleimage.svg"

So basically, the Views folder, and then no folder like the action name (Product). So how can I use paths relative to the view in this environment? The action becomes part of the url, but there is no actual folder named like the action method, and also the images will be under the Views folder which is not part of the url here... Also, the last part of the url in the route (productname) does not seem to show up at all in the image path, it seems to be interpreted as an id or something because I use only one action method to serve the views based on parameters lang and prod?

Is there no way to place images like this, and use relative paths like "images/imagename.svg" or the like? Or am I just misunderstanding the routing in MVC?

I need to do it like this to simplify adding content which is massive and the result of XSL transformations...

EDIT: Sorry, I had some of the urls incorrect as to the results I got. Should be fixed now to reflect what I have.

score 2 · Answer 1 · edited May 23 '17 at 11:44

I'm not sure whether you understand how the framework is supposed to work.

My first point is regarding the conventions. The convention is that you store your views in the Views folder. You may then have DisplayTemplates, EditTemplates and Shared for your display/edit templates or shared partial views. This is a convention that MVC developers are used to, so if you start placing something else in these folders, you are going to confuse other developers, and eventually yourself.

What are you trying to achieve? Are you after URLs in some specific format? One of the options that you have, is to implement action that will return your image. Another alternatives are URL re-writing or routing to static files: Using ASP.NET routing to serve static files

score 2 · Answer 2 · answered Mar 13 '12 at 01:00

Use a controller action to get the images from DB or disk. Here is an example of getting images from a folder called "ImageFolder" in the site root.

public virtual FilePathResult GetImage(string imageId){
    var path = Path.Combine(Server.MapPath("~"), "ImageFolder", imageId + ".svg");
    return new FilePathResult(path, "image/jpg");
}

You could use something like that to retrieve the sample images for your products.

In ASP.NET MVC you don't rely in folder hierarchy to navigate your site. The framework has some folder convention, but they are not used for routing.

For static images, you can place them in the Content/images folder.

Routing images relative to views in Asp.Net MVC?

2 Answers2