Chrome 및 Mozilla에서 오류 발생 이미지 교체 코드가 실패하는 이유는 무엇입니까?

이미지에 onerror 속성 사용

onerror 속성은 이미지를 로드할 수 없을 때 수행할 작업을 지정합니다. 이 경우 src 속성을 수정하고 잘못된 이미지를 기본 이미지로 바꾸는 코드를 제공했습니다.

그러나 이 코드가 IE에서는 작동하지만 Chrome과 Mozilla에서는 작동하지 않는 문제가 발생했습니다.

그 대답은 onerror 핸들러에 제공된 백업 URL도 유효하지 않은 경우 최신 브라우저가 오류 이벤트를 여러 번 트리거한다는 사실에 있습니다. 이벤트가 반복적으로 발생하고 src 속성이 계속 수정되므로 무한 루프가 발생합니다.

이 문제를 해결하려면 다음과 같이 코드를 수정하면 됩니다.

<img src="invalid_link" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';">

By this.onerror=null을 설정하면 오류 이벤트가 다시 트리거되는 것을 방지할 수 있습니다. 그러면 이미지가 끝없이 교체되지 않습니다.

http://jsfiddle.net/oLqfxjoz/에서 라이브 데모를 참조하여 구현을 시각화할 수도 있습니다.

위 내용은 Chrome 및 Mozilla에서 오류 발생 이미지 교체 코드가 실패하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!