Home/ Questions/Q 4001672
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T07:56:01+00:00

I have a javascript module which creates a div with a picture of a

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0