JavaScript中图像的相对路径 [英] Relative paths of images in JavaScript
问题描述
我有一个javascript模块，用一个关闭按钮（X）的图片创建一个div。
这个div和javascript放在我网站的很多地方。
相对路径解决方案：当一个页面包含javascript时，javascript使用相对路径为图像。 Rhe相对路径是相对于html页面的。如果不同路径的HTML页面使用这个javascript，我将需要2个不同的图片。
绝对路径解决方案：我不知道我的团队成员用于开发的服务器是什么我确信他没有在我的服务器上开发）。这意味着绝对路径将无法工作。
是否有克服这个问题的简单方法？如何让脚本知道它的路径？
可变路径（测试/登台/生产域）始终是一个问题javascript，最好的选择是在HTML中包含应用程序/网站的根路径。明显的地方是在你的模板层。例如：
< body data-root =$ {rootContext}>
<！ - 或者您的模板图层使用的任何语法 - >
然后在javascript中使用它来获取脚本中的用法。
var rootContext = document.body.getAttribute（data-root）;
注意，只有当DOM准备就绪时（或者document.body可用时，不同的跨浏览器）;）
另一种方法，在我看来，较少的漂亮选项是简单地渲染javascript。
<脚本>
var rootContext = $ {rootContext} //或模板图层使用的任何语法。
< / script>
至少使用'数据根'技术，您可以将值存储在任何您喜欢的位置并避免一个全局的定义。
因此，在您的代码中引用图片时，您可以执行以下操作：
img.src = rootContext +/media/js/close.gif;
或者创建一个漂亮的帮手方法：
//可以使用命名空间来避免全局变量。
var myApp = {
//当DOM / body准备就绪时仍然需要设置$ b $ rootContext：document.body.getAttribute（data-root），
getContext：函数（src）{
返回this.rootContext + src;
}
}
img.src = myApp.getContext（/media/js/close.gif）;
在助手方法中，您还可以编写一些代码以确保正确使用/和whatnot。 / p>
I have a javascript module which creates a div with a picture of a close button ("X"). This div and javascript is 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. Rhe 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 it's 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.
这篇关于JavaScript中图像的相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
