javascript - 如何使用相对于 url 路径的图像文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3612226/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript - How to use a image file relative to a url path?
提问by Seeker
Is there a way to use a image url relative path in a javascript file (just like the css files)?
有没有办法在javascript文件中使用图像url相对路径（就像css文件一样）？
for testing i used 2 divs and displayed a gif in background using css in 1st and using js in second:
为了测试，我使用了 2 个 div，并在第一个使用 css 并在第二个使用 js 在背景中显示了一个 gif：
-my file directory is: root/index.html
-我的文件目录是：root/index.html
root/module1/test.css
根/module1/test.css
root/module1/test.js
根/模块1/test.js
root/module1/img.gif
根/module1/img.gif
-index.html code:
-index.html 代码：
<html>
<head>
<link href="module1/test.css" rel="stylesheet" type="text/css">
</head>
<body>
<P id="p1"> Line 1 </P>
<P id="p2"> Line 2 </P>
<script type="text/javascript" src="module1/test.js"></script>
</body>
</html>
-test.css code:
-test.css 代码：
#p2 {background: url('img.gif')}
in the css I can use the relative path.
在 css 中我可以使用相对路径。
-test.js code:
-test.js 代码：
document.getElementById("p1").style.backgroundImage = 'url(./module1/img.gif)';
but in the js I have to use the absolute path or it doesn't work.
但是在 js 中我必须使用绝对路径，否则它不起作用。
-img.gif - you can use any gif image.
-img.gif - 您可以使用任何 gif 图像。
I've tried to search the web but I was just getting confused :(
我试图在网上搜索，但我只是感到困惑:(
plz help :)
请帮忙:)
Ps: if you know a solution in jquery i also appreciate.
Ps：如果您知道 jquery 中的解决方案，我也很感激。
回答by Pekka
In a CSS style sheet, the path is interpreted relative to the style sheet.
在 CSS 样式表中，路径是相对于样式表解释的。
If you specify a path later, using JavaScript, it will be interpreted relative to the document.
如果您稍后使用 JavaScript 指定路径，它将相对于文档进行解释。
You can still use relative paths, but, as said, they will have to be relative to the document. So it would have to be
您仍然可以使用相对路径，但如前所述，它们必须相对于文档。所以它必须是
url("module1/img.gif");
But you already know that.
但你已经知道了。
I don't know a way of building paths relative to the style sheet outside the style sheet.
我不知道在样式表之外构建相对于样式表的路径的方法。
The only workaround that comes to my mind is to define a class inside the style sheet and, instead of specifying a background image using javaScript, changing the element's class.
我想到的唯一解决方法是在样式表中定义一个类，而不是使用 javaScript 指定背景图像，而是更改元素的class。
In the style sheet:
在样式表中：
.p2_img_gif {background: url('img.gif')}
and when the time comes for the paragraph to get the background image, do a
当段落获取背景图像的时候，做一个
document.getElementById("p2").className = "p2_img_gif";
if you need to toggle classes, or specify multiple ones, consider using jQuery's addClass()and removeClass().
如果您需要切换类，或指定多个类，请考虑使用 jQueryaddClass()和removeClass().
回答by zwol
This works for me with Firefox 3.6.
这适用于 Firefox 3.6。
<!doctype html>
<style>
div { background: red; width: 80px; height: 80px }
</style>
<script>
window.onload = function() {
document.getElementById("test").style.backgroundImage = 'url("green.png")';
}
</script>
<p>There should be no red.</p>
<div id="test"></div>
where green.png is a green pixel. Which browser are you using?
其中 green.png 是一个绿色像素。您使用的是哪个浏览器？
回答by Bohdan Lyzanets
As variant use element inline style
作为变体使用元素内联样式
var element = document.getElementById("p1");
var imageUrl = './module1/img.gif';
element.setAttribute('style', 'background-image: url(' + imageUrl +');');
