在Javascript中获取相对CSS URL路径

Question

注意：我终于在Get script path

找到了一个完全重复的问题和答案

我有一个背景图像，用相对于我的css文件的路径定义。

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

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

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

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

其他解决方案？

这是与javascript - How to use a image file relative to a url path?类似的问题，但是类交换技巧表明这对我不起作用，因为我实际上有这些背景图像的变量列表。

编辑：背景信息。 Web应用程序（基于Django）完全独立于静态js，image和css文件提供HTML内容。静态内容在

中

static/
  js/
  css/
  images/

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

Answer 1

CSS样式表中的

相对于它们出现的CSS文件（即使@import编辑）。如果它们以HTML格式显示，则它们相对于HTML文件的基本URL（通常是HTML文件的URL），除非HTML中有<base href=...>元素。

因此，您需要找出解析相对网址的绝对网址，然后计算图片的相对网址。

您可能会尝试查看旧图像是否来自多个不同的地方。许多网络服务器累积起来，也许你只是把新图像放在一个合乎逻辑的，但仍然是错误的地方。

编辑：

绝对路径和路径相对../foo样式网址之间有多种选择。

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

协议相对网址：//my-domain.com/image/myImage.png

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