2013-03-25 4 views
0

내가 누락 된 이미지를 처리하고 배경 색상으로 교체하는 그런 일을 할배경 색상 (파이어 폭스)

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

그리고 그 처리하는 자바 스크립트 함수의 :

 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가 거기에 들어가는 것을 보여 주지만 배경색을 표시하지는 않습니다 ...

추신 : 나는 또한 JQuery를 사용해 보았습니다.

내가 뭘 잘못 했니?

+1

나는 이미지에 배경색을 설정할 수 없다고 말하고 싶다. 대신 TD로 설정해 보자. – Michi

답변

1

이미지의 $imgHeight0으로 설정되어 있다고 가정 할 수 있습니다. 궁극적으로 이미지가 페이지에 표시되지 않습니다.

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="" 있습니다 이미지처럼 행동을 표준 모드에서 alt 텍스트가있는 <span>