asp.net mvc image path and virtual directory

Question

I know this has to be a duplicate, but I've been wading through the hordes of information on this and I can't get it work.

I'm trying to get a site working on a client's server and they have the site installed in a virtual directory. I don't have this setup, locally, so I'm flying blind here.

I'm trying to build a path to an image. (it's for Facebook OpenGraph Meta data).

I need the path to the image to be a fully-qualified, absolute url. I've tried so many things, but nothing seems to work. The code below outputs a relative url, but this will not work.

<% var urlHelper = VirtualPathUtility.ToAbsolute("~/static/images/image.jpg");%>
<meta property="og:image" content="<%=urlHelper%>" />

outputs:

<meta property="og:image" content="/static/images/image.jpg" /> 

I've also tried:

<% var serverHost = HttpContext.Current.Request.Url; %>
<meta property="og:image" 
          content="<%=serverHost + "/static/images/image.jpg"%>" />

But that's producing:

<meta property="og:image" 
   content="http://localhost:51863/ViewFile.aspx/static/images/image.jpg" />

I'm looking for http://example.com/virtualdirectory/static/images/image.jpg

Any help will be much appreciated. I really don't want to have to hard-code the url.

Thanks, Scott

EDIT

I neglected to mention that my very first attempt was Url.Content("~/....jpg) but that outputs a relative url, not an abosolute one.

Answer 1

You could write a small extension method:

public static class UrlExtensions
{
    public static string AbsoluteContent(this UrlHelper url, string contentPath)
    {
        var requestUrl = url.RequestContext.HttpContext.Request.Url;
        return string.Format(
            "{0}{1}",
            requestUrl.GetLeftPart(UriPartial.Authority),
            url.Content(contentPath)
        );
    }
}

and then:

<meta property="og:image" content="<%= Url.AbsoluteContent("~/static/images/image.jpg") %>" />

which will output for example:

<meta property="og:image" content="http://localhost:7864/static/images/image.jpg" />

Answer 2

This code

public static class Helpers
{
  public static Uri FullyQualifiedUri( this HtmlHelper html , string relativeOrAbsolutePath )
  {
    Uri        baseUri  = HttpContext.Current.Request.Url ;
    string     path     = UrlHelper.GenerateContentUrl( relativeOrAbsolutePath, new HttpContextWrapper( HttpContext.Current ) ) ;
    Uri        instance = null ;
    bool       ok       = Uri.TryCreate( baseUri , path , out instance ) ;
    return instance ; // instance will be null if the uri could not be created
  }
}

should work for pretty much any URI you can throw at it.

One thing to note, though: page-relative URIs (such as foo/bar/image.png) might not resolve the way you think they might, especially if the URI references a directory, so you get the default page (i.e., http://localhost/foo/bar could be an actual resource, in which case the URI is complete, or it could be incomplete, in which case Asp.Net MVC's routing fills in the blanks. All the request has is the original URI. If you want to fix that, you'll need to get the RouteData for the request and interrogate it for the details.

Here's how things resolve with a web app rooted at http://localhost/MyApp and invoking the Html helper method in different ways from the About view of the Home controller.

• ~
  • resolves to http://localhost/MyApp/
• /
  • resolve to `http://localhost/
• ~/
  • resolves to http://localhost/MyApp/
• foo/bar/myImage.png
  • resolves to http://localhost/MyApp/Home/foo/bar/myImage.png
• /foo/bar/myImage.png
  • resolves to http://localhost/foo/bar/myImage.png
• ~/foo/bar/myImage.png
  • resolves to http://localhost/MyApp/foo/bar/myImage.png
• http://somesite.com/foo/bar/myImage.png
  • resolves to http://somesite.come/foo/bar/myImage.png
• http://somesite.com:123/foo/bar/myImage.png
  • resolves to http://somesite.come:123/foo/bar/myImage.png
• ftp://somesite.com/foo/bar/myImage.png
  • resolves to ftp://somesite.come:123/foo/bar/myImage.png
• mailto://local-part@domain.com
  • resolves to mailto:local-part@domain.com

Answer 3

Use the Content method on the UrlHelper.

http://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.content.aspx

Answer 4

You should use the routing to resolve your URLs.

Personally I like to follow the best practices guide here to:

Create Extension methods of UrlHelper to generate your url from Route

You'll likely want an extension method for these static images you have:

public static string StaticImage(this UrlHelper helper, string fileName)
    {
        return helper.Content("~/static/images/{0}".FormatWith(fileName));
    }

then you can do:

<meta property="og:image" content="<%: Url.StaticImage("image.jpg") %>" />