Question

有人会告诉我为什么我必须提供完整的URL才能使图像背景有效？下面的jQuery代码中的示例代码适用于此帖子上的许多人，但不适合我！我错过了什么吗？图片也可以通过URL访问。

注意：我知道有100个相同的问题并经历了最多。我也玩过单引号和双引号。

由于

JQ CODE

//This works fine
$('.response_table_cell.logo div').css('background-image', 'url("http://localhosttt/web/images/message_icons.png")');

//These won't work
$('.response_table_cell.logo div').css("background-image","url('images/message_icons.png')");
$('.response_table_cell.logo div').css("background-image","url('/images/message_icons.png')");
$('.response_table_cell.logo div').css("background-image","url('./images/message_icons.png')");
$('.response_table_cell.logo div').css("background-image","url('../images/message_icons.png')");
$('.response_table_cell.logo div').css("background-image","url('web/images/message_icons.png')");
$('.response_table_cell.logo div').css("background-image","url('/web/images/message_icons.png')");
$('.response_table_cell.logo div').css("background-image","url('./web/images/message_icons.png')");
$('.response_table_cell.logo div').css("background-image","url('../web/images/message_icons.png')");

根结构

web
->images
  ->message_icons.png
->scripts
  ->myjs.js
  ->mycss.css

HTML CODE

<div id="response_table">
    <div class="response_table_row">
        <div class="response_table_cell logo"><div></div></div>
        <div class="response_table_cell message"></div>
    </div>
</div>

CSS

.response_table_cell.logo div
{
    width: 46px;
    height: 46px;
    /*background-image: url('../images/message_icons.png');*/ //WORKS FINE when ENABLED
}

Answer 1

路径可以是完整路径也可以是相对路径（当然，如果图像来自另一个域，它必须是满的），如果你使用css则相同。

而你需要通过javascript或jquery分配它来提供完整路径（或替换路径的一部分，然后重新分配它）。

Answer 2

如果您使用 Jquery 添加 CSS ，则 Jquery 会将 CSS 添加到您的inline style

喜欢：<div style="backgroun-image:url("...")">

因此，您必须从 html文件中指定路径才能访问图片。

如果您从外部css 文件进行访问，那么您必须在 css文件中指定路径。

希望你理解。

让我们有一个像下面这样的导演

-->Images
   -->1.png
-->jsandcss
   -->javasc.js
   -->mycss.css
myhtmlfile.html

在mycss.css中将代码编写为background-image:url('../Images/1.png');

但是当我使用jquery添加时，将其设为background-image:url('Images/1.png');

Answer 3

由于非常紧急，我不得不改变编码来解决问题。

HTML中的其他部分:(我可以在JQ中对其进行硬编码，但base_url也不同！）

<input id="base_url" type="hidden" value="http://localhosttt/" />

在JQ中选择base_url以设置完整的URL：

var base_url = $('#base_url').val();
$('.response_table_cell.logo div').css({'background-image':'url("' + base_url + 'web/images/message_icons.png")'});

如果没有给出完整的URL，jQuery中的background-image将无法工作

3 个答案: