Relative paths of images in JavaScript_问答_开发者

开发者 https://www.devze.com 2023-02-14 14:20 出处：网络

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.

相关专题：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 开发者_如何学JAVAincludes 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?

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.

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.

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.