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?

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?

• javascript
• asp
• url
• reference

3 Answers 3

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./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'] } 

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

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'] }