Question

情况就是这样：

我有一个包含多个帖子的博客。每个帖子里面都有图片。使用jQuery，我总是包装每个帖子的第一张图片，所以我可以给它一个独特的样式。

在样式旁边，我还想抓住帖子的第一张图片并将其用作标题。标题已经有了背景，所以它应该被帖子的第一张图片取代。

if ($("body").is("#permalink") && $(".imgwrapper").length>0) {
var firstImage = $(".imgwrapper").attr('src')
  $('#header-bg').css('background-image', "url(" + firstImage + ")")

}

上面的代码不能正常工作，并在控制台中给出了以下错误：资源解释为图像但使用mime类型text / html传输

非常感谢您的帮助！

Answer 1

这样的工作：

http://jsfiddle.net/9Zk8G/

HTML

<div class="imgwrapper">
<img src="" />
</div>

JS

var firstImage="http://cdn-careers.sstatic.net/careers/gethired/img/3478c54721cd466fb6f7d3afe16e97d4.gif";  
$( "<img/>" ).attr( "src", firstImage ).appendTo( ".imgwrapper" );

Answer 2

您可以查看firstImage的值吗？如果URL按预期返回。代码没有错。

“资源被解释为图像但是使用mime类型text / html传输”

对于图片网址（text/html），Content-Type（响应标头）设置为firstName。但是，由于我们在背景图像中包含该URL，因此浏览器希望URL返回图像（content-type：image / *）。

浏览器会自动解释并将其显示为图像。如果图像损坏，请在新选项卡中打开图像网址并检查内容。它本身可能会返回一些HTML内容。

Answer 3

if ($("body").is("#permalink") && $(".imgwrapper").length>0) {
var firstImage = $(".imgwrapper").attr('src');
$('#header-bg').css('background-image', "url(" + firstImage + ")");

}

是因为你错过了“;”

Answer 4

您不需要url()属性中的css部分。试试这个：

if ($("body").is("#permalink") && $(".imgwrapper").length > 0) {
    $('#header-bg').css('background-image', $(".imgwrapper").attr('src'))
}

Answer 5

解决了它，仍然感谢所有的帮助和思考！这很有效：

if ($("body").is("#permalink") && $(".imgwrapper").length>0) {
  var firstImage = $(".imgwrapper img").attr('src')
  $('#header-bg').css('background-image', "url(" + firstImage + ")")

}

我在这里犯的错误是我没有定位图像而只包装了包装。

如何用jQuery更改div的背景？

5 个答案: