javascript - 使图像在通过 javascript 创建的弹出窗口中工作

Question

我有一个弹出窗口，所有数据都是通过 javascript 添加的。但是，所有添加的图像都没有得到解决。如何在不提供绝对 URL 的情况下使图像正常工作？

JSFiddle

$("#openPopup").click(function() {
    var win = window.open();
    var body = $(win.document.body);

    $(body).append($("<img src='/img/logo.png' style='background:blue' />"));
    $(body).append($("<div>Hello World</div>"));
});

Answer 1

window.location.hostname 应该这样做。

$(body).append($("<img src='http://"+window.location.hostname+"/img/logo.png' style='background:blue' />"));

http://jsfiddle.net/babumxx/v2zKa/2/

http://fiddle.jshell.net/babumxx/v2zKa/2/show/

Answer 2

UI 元素最好用作 CSS 背景：

#openPopup {
     background-image:url(img/logo.png);
     background-repeat:no-repeat;
     background-position:10px 10px;
}

CSS 路径是相对于样式表的位置，而不是页面本身。