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

ウェブページにはたくさんの画像があります。

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

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

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

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

それは何ですか？

最近この問題に遭遇し、「Adblock」拡張子が原因であることがわかりました（私の推測では、ファイル名に「banner」と「ad」という単語があったためです）。

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

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

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

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

1. クロムを右クリック
2. 「要素の検査」に移動します
3. 上部の「ネットワーク」タブを探します。クリックして。
4. [キャッシュを無効にする]チェックボックスをオンにします。

カビールの解は正しい。私の画像のURLは

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

これはAdBlockを作動させていました。これは私にとってクロスドメインの問題ではなく、ローカルホストとWebの両方で失敗しました。

Chromeのネットワークタブを使用して、読み込みに失敗したこれらの特定の画像のデバッグと非常にわかりにくい結果を見つけていました。最初の要求は応答を返しません（ステータス "（保留）"）。後で、元の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はいくらか不必要であり、複数のサイズの画像を処理するスライダーの柔軟性に影響を与えました。

教訓は次のとおりです。画像の名前には注意してください。これらの画像は、現在のプロモーションやスペシャルを邪魔にならない方法で訪問者に警告しているのと同じくらい、悪意や迷惑ではありませんでした。

画像がASP経由で生成されてResponse.Write()いる場合は、を呼び出さないでくださいResponse.Close();。Chromeは気に入らない。

このエラーは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で正常にテストされています。

事実：

• すべてのプラグインを無効にしても問題は解決しません。
• 問題が発生しないいくつかのサイトがあります。
• これは既知の問題です。問題424599をご覧ください：PHPページでDevToolsを開くと、リソースnet :: ERR_CACHE_MISSを読み込めませんでした。

一時的な作業の周りにあり37+（Windows用）Chromeで再びイネーブル（一時的な）showModalDialogのサポートが。

基本的に、次の場所にあるレジストリに新しい文字列を作成します。

HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\EnableDeprecatedWebPlatformFeatures

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

参考までに-この問題もあり、htmlには.jpgファイルが.JPGの大文字で記載されていましたが、ファイル自体は小文字の.jpgでした。ローカルで問題なくレンダリングされ、Codekitを使用していましたが、Webにプッシュされるとロードされませんでした。htmlと一致するようにファイル名を小文字の.jpg拡張子に変更するだけでうまくいきました。

Chrome（Canary）では、「Appspector」拡張機能をオフにしました。これでエラーは解消されました。

Chromeブラウザを最新バージョンに更新し、問題を修正しました。

これはad-blockerが原因です。プロジェクトファイル名に「ad」のような単語が含まれている場合、ad-blockerもこれらのファイルの読み込みをブロックします。

最善の解決策は、これらの名前キーでファイルを保存しないことです。