Relative paths of images in JavaScript

Question

I have a javascript module which creates a div with a picture of a close button ("X"). This div and javascript are placed in many places on my site.

Relative path solution: When a page includes the javascript, and the javascript uses a relative path for the image. The relative path is relative to the HTML-page. If HTML pages in different paths use this javascript I will need 2 different images.

Absolute path solution: I do not know what server my team-member is using for development (I know for sure that he is not developing on my server). This means that absolute paths will not work.

Is there a simple way of overcoming this problem? Like making the script somehow aware of its path?

BGerrissen · Accepted Answer · 2011-03-01 08:38:39Z

15

Mutable paths (test/staging/production domains) is always a problem in javascript, the best option is to include the root path of your application/website in the HTML. The obvious place to do this is in your template layer. For example:

<body data-root="${rootContext}">
<!-- or whatever syntax your template layer uses -->

And grab it with javascript for usage in your scripts.

var rootContext = document.body.getAttribute("data-root");

Note, you can only do this when the DOM is ready (or when document.body is available, differs cross browser) ;)

An alternative and in my view less pretty option is to simply render javascript.

<script>
    var rootContext = ${rootContext} // or whatever syntax your template layer uses.
</script>

At least with the 'data-root' technique, you can store the value wherever you like and avoid a global definition.

So in your code where you reference an image, you can do the following:

img.src = rootContext + "/media/js/close.gif";

Or create a nice helper method:

 // lets use a namespace to avoid globals.
 var myApp = {
     // still need to set this when DOM/body is ready
     rootContext: document.body.getAttribute("data-root"),
     getContext: function( src ) {
         return this.rootContext + src;
     }
 }

img.src = myApp.getContext( "/media/js/close.gif" );

In the helper method, you can also write some code to ensure proper uses of / and whatnot.

edited Mar 1, 2011 at 8:38

answered Mar 1, 2011 at 8:33

BGerrissen

21.7k4 gold badges41 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Felix Over a year ago

Why not just use <base>?

Benson · Accepted Answer · 2011-03-01 08:34:27Z

6

There are three ways to specify a path to an image in html:

Completely relative: <img src="kitten.png"/>
Absolute with regard to the filesystem, but relative to the current server: <img src="/images/kitten.png">
Absolute in all respects: <img src="http://www.foo.com/images/kitten.png">

The second method may work for you.

answered Mar 1, 2011 at 8:34

Benson

22.9k2 gold badges44 silver badges49 bronze badges

Comments

Felix · Accepted Answer · 2011-03-01 08:38:06Z

4

Can't you just use a CSS class? If it's just a div containing an img, you can get rid of the img and use background-image on the div. Setting this from CSS will make sure that the image path is always relative to the CSS file and will almost certainly work no matter the environment (as long as the other images in your CSS work).

Then, you can just set the className on your div accordingly.

answered Mar 1, 2011 at 8:38

Felix

89.7k44 gold badges152 silver badges168 bronze badges

1 Comment

BGerrissen Over a year ago

+1 concerning images, it's always better to use CSS backgrounds.

Collectives™ on Stack Overflow

Relative paths of images in JavaScript

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related