2013-03-25 4 views
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 ..

Что я делаю неправильно?

+1

Я бы сказал, что вы не можете установить цвет фона для изображения ... попробуйте установить его в TD вместо этого. – Michi

ответ

1

Я могу только предположить, что ваше изображение $imgHeight установлено на 0, в результате чего изображение не будет видно на странице.

Однако это, вероятно, не рекомендуется использовать фон в качестве резерва на элементе img. Различные браузеры обрабатывают незагруженные изображения по-разному (например, красный крест в IE). Вы, вероятно, хотите, чтобы назначить фон контейнера на изображении в:

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

td.imgContainer { 
    background:#fff; 
} 

Тогда просто изменить handleError функцию, чтобы скрыть ненагруженное изображение вместо этого.

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

Ваше изображение имеет alt="", что означает, что ошибки не будет отображаться на всех в режиме стандартов: Изображения действуют точно так же, как a <span> с текстом alt внутри в стандартном режиме.

Смежные вопросы