Relative paths of images in JavaScript

前端未结

关注

 3  2106

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 solu

相关标签:

3条回答

一个人的身影

2021-02-18 23:28

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
礼貌的吻别

2021-02-18 23:30
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
鱼传尺愫

2021-02-18 23:35
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}">

```
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 讨论(0)
发布评论:

提交评论
- 加载中...