0

不足している画像を処理し、背景色に置き換えるためにそのようなことをします

<td width="34"><img onError="handleError(this, '#fff', 'fail');" src="'. $profileImg .'" alt="" height="'.$imgHeight.'" /></td>

それを処理する Javascript 関数は次のとおりです。

      function handleError(elem, colorCode, state){
        if ((typeof(elem.onerror) === 'function' && state === 'fail')  || (elem.width === 0) ){
          elem.style.backgroundColor = colorCode;
          console.log(colorCode);
        }
      }

console.log の行は、firefox が入っていることを示していますが、背景色は表示されません ...

PS：JQueryも使ってみました..

私は何を間違っていますか？

4

3 に答える 3

2

alt=""これは、エラーが発生した場合、標準モードではまったく表示されないことを意味します: 画像は、標準モードで alt テキストが内部にあるように機能し<span>ます。

于 2013-03-25T18:07:53.223 に答える
1

画像$imgHeightが に設定されて0おり、最終的に画像がページに表示されなくなっているとしか思えません。

ただしimg、要素のフォールバックとして背景を使用することはおそらく良い考えではありません。ブラウザが異なれば、ロードされていない画像の処理方法も異なります (たとえば、IE の赤い十字)。おそらく、画像のコンテナーに背景を割り当てたいと思うでしょう:

<td class="imgContainer">
    <img ... />
</td>

td.imgContainer {
    background:#fff;
}

handleError次に、代わりにロードされていない画像を非表示にするように関数を変更します。

于 2013-03-25T09:32:32.540 に答える
1

これを試してください（htmlファイルとして保存し、任意のブラウザで開くだけです）

<html>
<head>
<script type="text/javascript">
function handleError(elem, colorCode, state){
        if ((typeof(elem.onerror) === 'function' && state === 'fail')  || (elem.width === 0) ){
          elem.style.backgroundColor = 'red';         
          console.log(colorCode);
        }
      }
</script>
</head>
<body>
<div class="q">
    <div><img  style="widht:200px;height:200px;disply:block;"onError="handleError(this, '#fff', 'fail');" src="'. $profileImg .'" alt="" height="'.$imgHeight.'" /></div>
</div>
<body>
</html>
于 2013-03-25T09:39:00.710 に答える