Question

我做了类似的事情来处理丢失的图像并用背景颜色替换它

<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 ..

我做错了什么？

Answer 1

您的图片有alt=""，这意味着在出现错误时，它在标准模式下根本不会显示：图片的行为就像<span>一样，标准模式下有替代文字。

Answer 2

我只能假设您的图片$imgHeight被设置为0，最终导致图片无法在页面上显示。

然而使用背景作为img元素的后备可能不是一个好主意。不同的浏览器将以不同的方式处理未加载的图像（例如，IE中的红叉）。您可能想要为图像的容器指定背景：

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

td.imgContainer {
    background:#fff;
}

然后只需更改handleError功能即可隐藏未加载的图像。

Answer 3

试试这个（只需保存为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>

图像中的背景颜色（firefox）

3 个答案: