web-dev-qa-db-ja.com

Chromeでリソースを読み込めませんでした

Webページにたくさんの画像があります。

他のブラウザはそれらを正しくダウンロードしていますが、Chromeはそれらをロードしません。

開発者コンソールには、各画像について次のメッセージが表示されます。

リソースの読み込みに失敗しました

この問題はChromeでのみ発生します。

それは何ですか？

google-chromecross-browser
177
AntonAL

私は最近この問題に遭遇し、それが "Adblock"拡張子によって引き起こされたことを発見しました（私の最善の推測は、ファイル名に "banner"と "ad"という単語があったからです）。

それがあなたの問題かどうかを確認するための簡単なテストとして、拡張機能を無効にしてシークレットモードでChromeを起動します（ctrl+shift+n）をクリックして、ページが機能するかどうかを確認します。 （chrome://extensionsを介して）明示的に実行するように設定していない限り、デフォルトではすべての拡張機能がシークレットモードで無効になっています。

264
sarink

ネットワークタブをチェックして、Chromeがリソースファイルのダウンロードに失敗したかどうかを確認します。

29
ismail

それが誰にでも役立つ場合のために、私はこれとまったく同じ問題を抱えていて、それが「Do Not Track Plus」Chrome拡張（バージョン2.0.8）によって引き起こされたことを発見しました。この拡張子を無効にすると、画像はエラーなく読み込まれました。

17
nuri

ネットワークリソースのキャッシュをオフにするオプションもあります。これは開発環境に最適かもしれません。

  1. クロムを右クリック
  2. 「要素の検査」に進みます
  3. 上部のどこかにある「ネットワーク」タブを探してください。クリックして。
  4. [キャッシュを無効にする]チェックボックスをオンにします。
13
john ktejik

Kabirの解決策は正しいです。私のイメージ URL

/images/ads/homepage/small-banners01.png,

そしてこれはAdBlockをトリップさせていました。これは私にとってクロスドメインの問題ではなく、localhostとWebの両方で失敗しました。

Chromeの[ネットワーク]タブを使用してデバッグし、ロードに失敗したこれらの特定の画像に対して非常にわかりにくい結果を見つけました。最初の要求は応答を返しません（Status "（pending）"）。行の後半で、元のURLをリストしてからイニシエータとして「リダイレクト」する2番目のリクエストがありました。リダイレクト要求ヘッダーはすべてbase64でエンコードされたデータのこの同一の短い行に対するもので、ステータスは「成功」でしたが、それぞれは応答を返しませんでした。

GET      data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg== HTTP/1.1

後で、これらのインラインスタイルがすべての画像要素に追加されたことに気付きました。

    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

最後に、コンソールに "リソースのロードに失敗しました"というメッセージは表示されませんでしたが、次のようになりました。

Port error: Could not establish connection. Receiving end does not exist.

これらのことのうちのどれかがあなたに起こっているならば、それはおそらくAdBlockと関係があります。オフにするか、画像ファイルの名前を変更してください。

また、AdBlockによって作成されたインライン CSS のため、プロモーションスライダーのレイアウトが破棄されていました。 Kabirの解決策を見つける前にCSSのレイアウトの問題を解決することができましたが、CSSは多少不要で、複数のサイズの画像を処理するためのスライダーの柔軟性に影響を与えました。

私はレッスンがあると思います：あなたがあなたのイメージに名前を付けるものに注意してください。これらの画像は、目立たない方法で現在のプロモーションや特別な情報を訪問者に警告していたので、悪意のあるものでも迷惑なものでもありませんでした。

8
jmorganmartin

画像がASP Response.Write()を介して生成される場合は、Response.Close();を呼び出さないでください。 Chromeは嫌いです。

7
bcolin

このエラーは、Chrome（最後のバージョン24.0.1312.57 m）で、そして画像がhtml画像よりも大きい場合にのみ発生していました。私はこのように画像を出力するためにPHPスクリプトを使用していました：

header('Content-Length: '.strlen($data));
header("Content-type: image/{$ext}");
echo base64_decode($data);

画像の長さに1を加えることで解決しました。

header('Content-Length: '.strlen($data) + 1);
header("Content-type: image/{$ext}");
echo base64_decode($data);

Chromeは正しいバイト数を想定していないようです。

ChromeとIE 9で成功した。

4
marcostrama

参考までに - 私もこの問題を抱えていて、私のHTMLは大文字の.JPGを含む.jpgファイルをリストしていましたが、ファイル自体は小文字の.jpgでした。これはローカルでもCodekitを使ってもうまく表示されますが、Webにプッシュされたときにはロードされません。 HTMLに合わせて小文字の.jpg拡張子を持つようにファイル名を変更するだけで、うまくいきます。

3
Tony Tambe

Chromeで一時的なshowModalDialogサポートを再度有効にする（Windows用）37 +.

基本的には、レジストリに新しい文字列を作成します。

HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\EnableDeprecatedWebPlatformFeatures

EnableDeprecatedWebPlatformFeaturesキーの下に、1という名前とShowModalDialog_EffectiveUntil20150430という値の文字列値を作成します。ポリシーが有効になっていることを確認するには、chrome://policy URLにアクセスしてください。

3
Merlin051

事実：

2
user669677

Chrome（Canary）では、 "Appspector"拡張子のチェックを外しました。これでエラーは解決しました。 enter image description here

1
MannyC

Chromeブラウザを最新バージョンにアップデートし、問題を解決しました。

1
Sergiu