JavaScript中图像的相对路径

Posted 2023-02-23

技术标签:

【中文标题】JavaScript中图像的相对路径【英文标题】：Relative paths of images in JavaScript 【发布时间】：2011-07-06 08:06:58 【问题描述】：

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

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

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

有没有解决这个问题的简单方法？就像让脚本以某种方式知道它的路径？

【问题讨论】：

【参考方案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>

至少使用“数据根”技术，您可以将值存储在您喜欢的任何位置，避免全局定义。

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

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>？【参考方案2】：

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

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

第二种方法可能适合您。

【讨论】：

【参考方案3】：

你不能只使用一个 CSS 类吗？如果它只是一个包含img 的div，您可以去掉img 并在div 上使用background-image。从 CSS 设置此选项将确保图像路径始终与 CSS 文件相关，并且几乎可以肯定无论环境如何（只要您的 CSS 中的其他图像工作）都可以工作。

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

【讨论】：

+1 关于图片，最好使用 CSS 背景。