1

私は画像を表示するために使用しています。ただし、一部のエントリでは、画像が実際に欠落している場合があります。リンク切れアイコンが表示されないようにする方法はありますか? (つまり、画像が見つからない場合は要素をスキップします)

4

5 に答える 5

1

確かに...あなたができることがいくつかあります：

壊れた画像のサイズを維持する
想定される画像のサイズがわかっている場合は、css を使用して強制的に変更できます。

.img-broken {
   width: 250px;
   height: 250px;
   display: block;
}

画像
を置き換える プレースホルダーをより良いものに置き換えたいとします。

<img src="..." onerror="this.src='/img/broken_img_error.jpg';">

画像を完全に消去
@Slave の回答を参照してください。

于 2012-08-31T18:27:33.967 に答える
1

これを試して：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script>
    function removeElement(elem) {
        var div = document.getElementById("mainDiv");
        div.removeChild(elem);
    }
</script>
    <title></title>
</head>
<body>
    <div id="mainDiv">
        <img  onerror='removeElement(this);' src="icon.png" />
    </div>
</body>
</html>
于 2012-08-31T18:29:03.477 に答える
1

ここでは、JavaScriptが最善のアプローチであるとはまったく思いません。

常に実際に存在する画像を修正したり、それに依存したりできない場合 (実際に存在することはわかっています)、壊れた画像を防ぐ最も簡単な方法は.htaccess、画像フォルダーにファイル (またはホスティング環境によっては同等のもの) を配置することです。

このアプローチの素晴らしい点は、ブラウザーのサポートについて心配がないことです。これはサーバー上で発生するため、ユーザーは JavaScript を無効にした古い独自の AOL 4.0 ブラウザーを使用している可能性がありますが、これは引き続き機能します。ユーザー エージェントの違いや JavaScript の無効化に対処する必要はまったくありません。

これをユーザー画像に使用します。イメージ パスはデータベース内にありますが、さまざまな理由により、データベースで指定されたイメージが実際にはフォルダー内にない場合があります。これは、次の.htaccess場所にあるファイルの内容です。images/users/

RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ images/users/default.png [R=301,L]

これが行うことは、存在しないファイルに対する要求をファイルに静かに転送することですdefault.png。これは、私の「写真がありません」画像です。これで、 のリクエストがimages/users/this-does-not-exist.png来ると、代わりにファイルdefault.pngが提供されます。壊れた画像はありません！

ドキュメンテーション

于 2012-08-31T18:30:35.133 に答える
1

次のようなコードがあるとします。

var imgs = document.getElementsByTagName('img');

変数にいくつかの画像を入力します。画像タグのメソッドを設定するだけonerrorで（他の回答で述べたように）、不足している画像を必要に応じて処理できます。

<img>これにより、画像が読み込まれないタグが削除されます。

for (var i in imgs)
{
    imgs[i].onerror = function() {
        this.style.display = 'none';
    }
}

タグを非表示にする代わりにロードしたい場合(ブラウザは、存在しないmissing_image.jpg場合に陥る可能性のある無限ループをおそらく検出しないため、これには注意してください...):missing_image.jpg

for (var i in imgs)
{
    imgs[i].onerror = function() {
        this.src = 'missing_image.jpg`;
    }
}

ソース:

  1. Javascript 画像オブジェクト: http://www.w3schools.com/jsref/dom_obj_image.asp
  2. HTML タグ: http://www.w3schools.com/tags/tag_img.asp
于 2012-08-31T18:51:46.213 に答える
-1

画像の場所にAJAX呼び出しを行って200の結果が得られることを確認し、それに応じて表示/非表示にする以外に、良い方法は思いつきません。

壊れた画像リンクを修正しないのはなぜですか?

于 2012-08-31T18:20:57.703 に答える