logo标签列表

JavaScript中图片的相对路径

javascripthtmlpath
18

我有一个JavaScript模块，它创建了一个带有关闭按钮（"X"）图片的div。这个div和JavaScript被放置在网站的许多地方。

相对路径解决方案：当一个页面包含JavaScript，并且JavaScript使用一个相对路径来设置图片时，相对路径是相对于HTML页面的。如果不同路径的HTML页面都使用这个JavaScript，那么我将需要2个不同的图片。

绝对路径解决方案：我不知道我的团队成员正在开发什么服务器（我确定他没有在我的服务器上开发）。这意味着绝对路径将无法工作。

有没有简单的方法来克服这个问题？比如使脚本能够自动识别其路径?

3个回答
15

可变路径（测试/暂存/生产域）在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" );

在这个辅助方法中，您还可以编写一些代码来确保正确使用斜杠等符号。

为什么不直接使用 <base>？ - Felix
6

在html中，指定图片路径有三种方式：

  • 完全相对路径：<img src="kitten.png"/>
  • 相对于服务器的文件系统绝对路径：<img src="/images/kitten.png">
  • 在所有方面都是绝对路径：<img src="http://www.foo.com/images/kitten.png">

第二种方法可能适合你。

4
您不能只使用CSS类吗？如果只是包含img的div，则可以摆脱img并在div上使用background-image。从CSS设置这个属性将确保图像路径始终相对于CSS文件，并且几乎肯定会在任何环境中工作（只要CSS中的其他图像有效）。
然后，您只需相应地设置div上的className即可。
关于图片，最好使用CSS背景。 - BGerrissen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接