web-dev-qa-db-ja.com

画像プレースホルダー

画像がない場合は色が表示されるはずですが、壊れた画像アイコンがそれを削除する方法を示すように、背景色で画像タグを定義しましたか？

Jqueryやフレームワークを追加してページをかさばりたくありません。また、サイトがほぼ完成しているため、画像にdivの種類を追加できません。

JavaScriptのみで答えを見つけました

function ImgError(source){
source.src = "/images/noimage.gif";
source.onerror = "";
return true;
}

<img src="someimage.png" onerror="ImgError(this);"/>
javascripthtmlcssimage
18
Pradyumna Challa

あなたは以下を使用してそれを隠すことができます：

<img
  src="my.png"
  onerror="this.style.display='none'"
/>

次のように画像が見つからない場合は、別の画像を表示できます。

<img src="my.png" onerror="this.src = 'image-not-found.png';" />
54
Hemant Metalia

1x1空のpngのソリューション

        function ImgError(source){
            empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=";
            source.src = "data:image/png;base64," + empty1x1png;
            source.onerror = "";
            return true;
        }

        <img src="someimage.png" onerror="ImgError(this);"/>
7
Dmitry Skorinko

簡単な解決策は、文字通り、空白のプレースホルダー画像を使用することです。これは一般的にスプライトに使用されますが、これも使用できると思います。

透明度を有効にして1x1 pxの空白のgif画像を作成し、「src」属性をblank.gifに指定して、css background-imageプロパティを介して画像を指定します。したがって、背景画像が見つからなくても、リンク切れの画像は表示されません。

4
Ege

これは一部のブラウザの機能です-私が思い出せる限り、Firefox、ChromeおよびSafariは何も表示しませんが、Internet Explorerは壊れた画像アイコンを表示します。JavaScriptを使用しないと、私はあなたを信じていませんこの動作を上書きできます。

1
MassivePenguin

ブラウザは壊れた画像アイコンを実行します。コード内で変更できるものではありません。ブラウザーが異なると、欠落している画像の扱いが異なることがわかるでしょう。

ただし、やりたいことは別の方法で処理できます...

スタイル：

div.image-maybe-missing {
    width: 300px;
    height: 450px;
    background-color: red;
    background-image: url("/images/is-it-there.png");
}


HTML：

<div class="image-maybe-missing">
</div>

これにより、画像が存在しない場合、背景が赤の空のボックスが表示されます。 divの幅と高さは、画像の幅と高さに一致する必要があります。

1
user166560

this.remove（）を試して、壊れた画像のプレースホルダーを削除します。

<div class="cell">
  <p>
    <img src="pic.png" onerror="this.remove();" />
  </p>
</div>

セルdivを使用してレイアウトを保持しています。

0
MannyC

これはブラウザに依存する動作ですが、それについては何もできません。ここにいくつかのオプションがあります：

1）JavaScriptを使用して、CSSを使用して非表示に設定することでロードに失敗したときに画像を非表示にするonerrorハンドラーを画像に追加します（背景色が適用されないため、背景色を適用するdivが必要です）画像がhddenかどうかを示します）。

JQueryなしで、コードを変更せずに、サイト内のすべての画像にエラーハンドラーを適用するには、これを行うことができます（これをページの最後にあるスクリプトに入れます。<head>にある場合は機能しません。そして、あなたはそれをwindow.onloadに置くことができないか、画像がロードされる前に起動しません）。

var images = document.getElementsByTagName('img');
for (i = 0; i < images.length; i++) {
    images[i].onerror = function() {
        this.style.visibility = 'hidden';
    }
}

2）<img>タグを使用する代わりに、divでcss background-imageとして画像を設定します。セマンティックではありませんが、ロードに失敗しても壊れた画像アイコンは表示されず、背景色とラベル（altタグではない）を指定できます。

0
Nick Lockwood