JavaScript 中图片的相对路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5152002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Relative paths of images in JavaScript
提问by eshalev
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 模块，它创建一个带有关闭按钮（“X”）图片的 div。这个 div 和 javascript 放在我网站上的很多地方。
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.
相对路径解决方案：当页面包含javascript，并且javascript使用图像的相对路径时。相对路径是相对于 HTML 页面的。如果不同路径中的 HTML 页面使用此 javascript，我将需要 2 个不同的图像。
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?
有没有简单的方法来克服这个问题？比如让脚本以某种方式知道它的路径？
采纳答案by BGerrissen
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:
可变路径（测试/暂存/生产域）在 javascript 中始终是一个问题，最好的选择是在 HTML 中包含您的应用程序/网站的根路径。这样做的明显位置是在您的模板层中。例如：
<body data-root="${rootContext}">
<!-- or whatever syntax your template layer uses -->
And grab it with javascript for usage in your scripts.
并使用 javascript 抓取它以在您的脚本中使用。
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) ;)
请注意，您只能在 DOM 准备好时（或当 document.body 可用时，跨浏览器不同时）才能执行此操作；)
An alternative and in my view less pretty option is to simply render javascript.
在我看来，另一种不太漂亮的选择是简单地呈现 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.
在辅助方法中，您还可以编写一些代码来确保正确使用 / 等。
回答by Benson
There are three ways to specify a path to an image in html:
在 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">
- 完全相对：
<img src="kitten.png"/> - 相对于文件系统是绝对的，但相对于当前服务器：
<img src="/images/kitten.png"> - 各方面绝对：
<img src="http://www.foo.com/images/kitten.png">
The second method may work for you.
第二种方法可能适合你。
回答by Felix
Can't you just use a CSS class? If it's just a divcontaining an img, you can get rid of the imgand use background-imageon 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).
你不能只使用 CSS 类吗？如果它只是一个div包含img，则可以去掉img并background-image在 上使用div。从 CSS 设置此项将确保图像路径始终与 CSS 文件相关，并且几乎肯定会在任何环境下工作（只要 CSS 中的其他图像工作）。
Then, you can just set the classNameon your divaccordingly.
然后，你可以设置className你的div相应。
