Question

我有一个javascript模块，它创建一个带有关闭按钮（“X”）图片的div。这个div和javascript放在我网站的很多地方。

相对路径解决方案：当页面包含javascript时，javascript使用图像的相对路径。相对路径相对于HTML页面。如果不同路径中的HTML页面使用此javascript，我将需要2个不同的图像。

绝对路径解决方案：我不知道我的团队成员用于开发的服务器（我确信他不在我的服务器上开发）。这意味着绝对路径不起作用。

有没有一种简单的方法来克服这个问题？就像让脚本以某种方式意识到它的路径一样？

Answer 1

可变路径（测试/暂存/生产域）在javascript中始终是一个问题，最好的选择是在HTML中包含应用程序/网站的根路径。显而易见的地方是你的模板层。例如：

<body data-root="${rootContext}">
<!-- or whatever syntax your template layer uses -->

使用javascript抓取它以便在脚本中使用。

var rootContext = document.body.getAttribute("data-root");

注意，您只能在DOM准备就绪时（或者当document.body可用时，跨浏览器不同）;）

另一种选择，在我看来，不太常见的选择就是简单地渲染javascript。

<script>
    var rootContext = ${rootContext} // or whatever syntax your template layer uses.
</script>

至少使用'data-root'技术，您可以将值存储在任何位置，避免使用全局定义。

因此，在您引用图像的代码中，您可以执行以下操作：

img.src = rootContext + "/media/js/close.gif";

或者创建一个好的帮助方法：

 // 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" );

在辅助方法中，您还可以编写一些代码以确保正确使用/和诸如此类的东西。

Answer 2

你不能只使用CSS类吗？如果它只是包含div的{{1}}，您可以摆脱img并使用img上的background-image。从CSS设置这将确保图像路径始终相对于CSS文件，并且几乎肯定无论环境如何（只要CSS中的其他图像工作）。

然后，您可以相应地在div上设置className。

Answer 3

有三种方法可以在html中指定图像的路径：

完全相对：<img src="kitten.png"/>
关于文件系统的绝对，但相对于当前服务器：<img src="/images/kitten.png">
绝对各方面：<img src="http://www.foo.com/images/kitten.png">

第二种方法可能适合您。

JavaScript中图像的相对路径

3 个答案: