ASP MVC Friendly URL's and Relative Path Images

Question

I have an ASP.NET MVC page, where I am trying to show friendly URL's.

So, I have a Category View in the Home Controller, that accepts a categoryKey value to get the content of the page.

For instance: http://localhost/Home/Category/Bikes gets the bike content.

in my Global.asax.cs, i have the following to handle this:

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

  routes.MapRoute(
      "Category",
      "{controller}/{action}/{categoryKey}",
      new { controller = "Home", action = "Category", categoryKey = "" });

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

This works just fine, and it gets the content, however, I am getting the content from a Content Management system, for easy editing. When you add an image on the content management, it adds the image with a relative path:

<img src="../AdminUploadContent/bikes.gif" alt="Bikes" />

Now, if i goto "http://localhost/Home/Category", and that image tag is on the base page, it will pull up the image. However, if i goto "http://localhost/Home/Category/", or add the actual category of "/Home/Category/Bikes"/, the image doesn't show up. The properties of the image is pointing to "http://localhost/Home/AdminUploadContent/bikes.gif".

Is there anything I can put in my Global.aspx.cs file to handle the relative path? Even if i manually edit the content management to add ../../AdminUploadContent/bikes.gif, it is chopping off the first ../, since it is doing some validation.

score 46 · Answer 1 · edited Feb 22 '15 at 03:44

46

Use the Url.Content method when generating a path to your image.

<img src="@Url.Content("~/AdminUploadContent/bikes.gif")" />

or if using the WebForms view engine:

<img src="<%= Url.Content("~/AdminUploadContent/bikes.gif") %>" />

edited Feb 22 '15 at 03:44

p.campbell

98,673
67
256
322

answered Aug 02 '10 at 21:29

marcind

52,944
13
125
111

runat="server" is not needed in this case i think – Pavel Morshenyuk Aug 02 '10 at 21:47
@marcind, hi, i am saving Imagepath in database as : `c://user/tom/images` , i am not able to retrieve it in view, why ? – Shaiju T Aug 10 '15 at 17:19

score 2 · Answer 2 · answered Aug 02 '10 at 21:01

2

You can use the relative path " ~/ " to refer to the current virtual directory where the page is located. Try to add runat="server" attribute to your "img" tag and "~" sign in "src" attribute:

<img runat="server" src="~/AdminUploadContent/bikes.gif" alt="Bikes" />

answered Aug 02 '10 at 21:01

Pavel Morshenyuk

10,891
4
32
38

4
I would not recommend mixing the asp.net Webforms idiom with asp.net mvc. Stick to this
– Roman Aug 11 '11 at 09:58

score 1 · Answer 3 · answered Nov 13 '14 at 17:21

1

This works too.

<img src="@Url.Content("~/Images/yourimage.png")"/>

answered Nov 13 '14 at 17:21

LawMan

3,469
1
29
32

score 0 · Answer 4 · answered Oct 12 '13 at 19:38

0

You can implement a custom http module that will rewrite path from the relative ../../img.png to needed handling the Referer http header, for instance.

answered Oct 12 '13 at 19:38

Pavel Nazarov

723
6
10

BSPEC.COM · Answer 5 · 2022-12-18T01:29:58.667

0

I had to just Add / to the src attribute

Before:

<div><img alt='' src='" & image_url & "' style='vertical-align: top; height: 40px'/><div class='auto-style1' style='padding: 10px'></div>

After:

<div><img alt='' src='/" & image_url & "' style='vertical-align: top; height: 40px'/><div class='auto-style1' style='padding: 10px'></div>

Where image_url is a Function of my page code-behind class.

edited Dec 18 '22 at 01:29

answered Dec 17 '22 at 14:35

BSPEC.COM

1
2

ASP MVC Friendly URL's and Relative Path Images

5 Answers5

Linked