在Javascript中获取相对CSS URL路径

Question

注意:我终于在以下位置找到了一个完全重复的问题和答案:获取脚本路径

我有一个背景图像定义了相对于我的CSS文件的路径.

.my-image-class {
  background-image: url("../images/my_bg_image.png");
}

我想在JavaScript中更改此路径,以便它现在指向../images/my_updated_bg_image.png.但是,简单地更改JavaScript中的样式声明会更改从CSS位置到HTML位置的相对路径的含义.

有没有办法从相对CSS URL中提取绝对URL？

如果没有,有没有办法提取当前运行的JavaScript函数的源的绝对URL？这会给我相同的信息,因为我的JS文件也与图像文件有关.

其他方案？

这是一个类似于javascript的问题- 如何使用相对于url路径的图像文件？但是类交换技巧表明这对我不起作用,因为我实际上有一个这些背景图像的变量列表.

编辑:背景信息.Web应用程序(基于Django)完全独立于静态js,image和css文件提供HTML内容.静态内容在

static/
  js/
  css/
  images/

文件结构.所以我知道这些文件之间的相对关系.但是,HTML内容和静态内容的绝对URL可能会发生变化.所以我不希望将HTML内容的硬编码URL混合到我的js文件中,如果我可以避免它.我从第三方获得了Django模板,所以我也想避免编辑它.

Answer 1

CSS 样式表中的 URL 相对于它们出现的 CSS 文件（即使是@imported）。如果它们出现在 HTML 中，则它们与 HTML 文件的基本 URL 相关，该基本 URL 通常是 HTML 文件的 URL，除非<base href=...>HTML 中存在元素。

因此，您需要计算出解析相对 URL 所依据的绝对 URL，然后计算图像的相对 URL。

您可以尝试查看旧图像是否是从多个不同的地方提供的。许多网络服务器积累了垃圾，也许您只是将新图像放在一个合乎逻辑但仍然错误的位置。

编辑：

../foo绝对和路径相对样式 URL之间有多种选项。

绝对路径：/images/myImage.png.

协议相关 URL：//my-domain.com/image/myImage.png

其中任何一个都可以让您在指定所需的数量但不再指定更多之间取得更好的平衡。