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=""这意味着出错时它在标准模式下根本不会显示：图像的行为就像在<span>标准模式下带有 alt 文本一样。

于 2013-03-25T18:07:53.223 回答
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 回答
1

我只能假设您的图像$imgHeight被设置为0，最终导致图像在页面上不可见。

然而，使用背景作为img元素的后备可能不是一个好主意。不同的浏览器会以不同的方式处理未加载的图像（例如 IE 中的红十字）。您可能希望为图像的容器分配背景：

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

td.imgContainer {
    background:#fff;
}

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

于 2013-03-25T09:32:32.540 回答