0

これは状況です：

私はいくつかの投稿があるブログを持っています。各投稿には画像が含まれています。jQuery を使用して、各投稿の最初の画像を既にラップしているので、独自のスタイルを設定できます。

スタイリングの次に、投稿の最初の画像を取得してヘッダーとして使用したいと思います。ヘッダーには既に背景があるため、投稿の最初の画像に置き換える必要があります。

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

}

どういうわけか、上記のコードが機能せず、コンソールに次のエラーが表示されます: リソースはイメージとして解釈されましたが、MIME タイプは text/html で転送されました

あなたの助けは大歓迎です!

4

5 に答える 5

2

このようなものは動作します：

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" );
于 2013-06-24T08:55:14.910 に答える
1

の値を確認できますかfirstImage。URL が期待どおりに返された場合。コードに問題はありません。

「リソースは画像として解釈されましたが、MIME タイプ text/html で転送されました」

Content-Type（レスポンスヘッダー）はtext/html画像URL（firstName）と同様に設定されます。ただし、その URL を背景画像に含めると、ブラウザーは URL が画像 (コンテンツ タイプ: image/*) を返すことを期待します。

ブラウザが自動的に解釈して画像として表示します。画像が壊れている場合は、新しいタブで画像の URL を開いて内容を確認してください。一部の HTML コンテンツ自体が返される場合があります。

于 2013-06-24T08:56:41.923 に答える
0 
if ($("body").is("#permalink") && $(".imgwrapper").length>0) {
var firstImage = $(".imgwrapper").attr('src');
$('#header-bg').css('background-image', "url(" + firstImage + ")");

}

「;」がないからですか？

于 2013-06-24T08:46:00.380 に答える
0

それを解決しました, それでもすべての助けと一緒に考えてくれてありがとう! これはうまくいきました：

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

}

ここで犯した間違いは、イメージではなくラッパーのみをターゲットにしたことです。

于 2013-06-24T08:58:53.877 に答える
0

プロパティのurl()一部は必要ありません。cssこれを試して：

if ($("body").is("#permalink") && $(".imgwrapper").length > 0) {
    $('#header-bg').css('background-image', $(".imgwrapper").attr('src'))
}
于 2013-06-24T08:49:05.610 に答える