Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Relative paths of images in JavaScript

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?

like image 288
eshalev Avatar asked Mar 01 '11 08:03

eshalev


People also ask

What is a relative path JavaScript?

A link that has an absolute path will tell the computer which server to go to and then all the folders that you have to drill down through to get to the target. A link that has a relative path will be written to tell the computer how to get from the folder with the currently viewed topic to the target.

How do I find the path of a picture?

Click the Start button and then click Computer, click to open the location of the desired file, hold down the Shift key and right-click the file. Copy As Path: Click this option to paste the full file path into a document. Properties: Click this option to immediately view the full file path (location).

What are relative paths?

A relative path refers to a location that is relative to a current directory. Relative paths make use of two special symbols, a dot (.) and a double-dot (..), which translate into the current directory and the parent directory. Double dots are used for moving up in the hierarchy.


3 Answers

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.

like image 160
BGerrissen Avatar answered Oct 01 '22 20:10

BGerrissen


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.

like image 38
Benson Avatar answered Oct 01 '22 19:10

Benson


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.

like image 21
Felix Avatar answered Oct 01 '22 20:10

Felix