How to always resolve URLs relative to my web applications root?

Question

I have an web application that is a JavaScript file will the following line of code:

var arrowimages = { down: ['downarrowclass', 'images/AppNavDownArrow.gif', 23], right: ['rightarrowclass', 'images/AppNavRightArrow.gif'] }

When I am at the root of my web application, the reference to the images is working as expected. When I browse to a sub folder in my application, it adds the same sub folder to the image URL and it does not load.

How do I modify the code so it will point to the create image path when I am in a subfolder within my application?

score 10 · Accepted Answer · edited May 23 '17 at 10:29

10

You should lead the paths with a /. This way the paths will be always resolved from the domain root.

var arrowimages = { down: ['downarrowclass', '/images/AppNavDownArrow.gif', 23], right: ['rightarrowclass', '/images/AppNavRightArrow.gif'] }

Otherwise, they'll be resolved relative to the current URL; by tacking the path onto the end of the current folder (unless you're using a <base/ > tag (and if you are, remove it)).

If you're app is situated within a sub folder (e.g. http://example.com/myapp), then you'd need to prefix the paths with myapp such as; /myapp/images/AppNavDownArrow.gif.

For a portable solution, you might want to consider having a configuration parameter to store the root of your app (e.g root = /myapp/). You could then output this parameter in a config object in JavaScript as explained in my other answer. Your URL's would then look like this;

var arrowimages = { down: ['downarrowclass', config.base + '/images/AppNavDownArrow.gif', 23], right: [config.base + '/rightarrowclass', '/images/AppNavRightArrow.gif'] }

edited May 23 '17 at 10:29

Community

1
1

answered Mar 08 '12 at 16:37

Matt

74,352
26
153
180

That did not work. My apps URL is `http://www.mydomain.com/myapp`, the URL for the image folder in my app is `http://www.mydomain.com/myapp/images`. When I add the `/` to the begining of the URL, it goes back to the website root instead of my apps root – Michael Kniskern Mar 08 '12 at 16:45
please add these specifics to your original question to better explain exactly what you need – csturtz Mar 08 '12 at 16:54
@MichaelKniskern: see my update. you must either include `/myapp` in the URL, or something more advanced like my updated answer explains. – Matt Mar 08 '12 at 16:57
Thanks. I used a combination of this solution and the one provided in you link for a portable solution. – Michael Kniskern Mar 08 '12 at 17:24
This is exactly what I was looking for. I wish I knew earlier that / at the beginning of the path resolved to the domain root. Thank-you! – Mausimo Jul 05 '12 at 16:27

score 3 · Answer 2 · answered Mar 08 '12 at 16:37

3

Use /images/AppNavDownArrow.gif instead of images/AppNavDownArrow.gif.

answered Mar 08 '12 at 16:37

Domenic

110,262
41
219
271

score 0 · Answer 3 · answered Sep 09 '14 at 17:47

Although you can prefix your paths with "/" to map to the domain root, domain root does not always equal application root in ASP.NET. It also makes your scripts fragile if the structure of your development environment doesn't match your production environment.

Instead, use:

var arrowImages = { down: ['downarrowclass', '<%= Page.ResolveClientUrl("~/images/AppNavDownArrow.gif") %>', 23], right: ['rightarrowclass', '<%= Page.ResolveClientUrl("~/images/AppNavRightArrow.gif")  %>'] }

That will ensure that your paths point to the root of the current application context in IIS, be that the domain root or a virtual directory.

If you don't want to put the script on your page and keep it in a .js file instead, in your masterpage/layout/whatever, create a variable that points to your application root and then reference that variable in your script file:

<script type="text/javascript">
        var configuration = {
            applicationRoot: '<%= Page.ResolveClientUrl("~/") %>',
                currentPath: '<%= HttpContext.Current.Request.Path %>'
            }
</script>

In your script file:

var arrowImages = { down: ['downarrowclass', configuration.applicationRoot +'/images/AppNavDownArrow.gif', 23], right: ['rightarrowclass', configuration.applicationRoot +'/images/AppNavRightArrow.gif'] }

How to always resolve URLs relative to my web applications root?

3 Answers3