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?

Answer 1

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