오류 발생 시 HTML 대체 이미지

얼마 전에 외부 소스의 이미지가 로드되지 않는 문제가 발생했습니다.

이 경우 누군가의 Twitter 프로필 이미지에 대한 링크를 저장했습니다. 사용자가 이 이미지를 변경하면 새 이미지가 자동으로 반영되지 않습니다.

그래서 대체 이미지를 살펴보기로 했습니다.
그리고 의외로 쉽습니다.

우리가 달성하고자 하는 것:

이미지 로드

로드되지 않으면 폴백을 표시합니다

.

Note: Alternatively, you could decide to remove the image

오류 대체 이미지의 HTML

샘플 HTML 실험을 설정해 보겠습니다.

<img
  src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-163822.jpeg"
/>

그러면 Photo by Pixabay from Pexels(스톡 이미지 사이트)가 로드됩니다.

이것은 완벽하게 작동하지만 이제 이미지에 임의로 숫자를 추가하여 파괴해 봅시다.

<img
  src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-00000.jpeg"
/>

이것으로 우리는 매우 성가신 깨진 이미지를 얻습니다.



그래서 이런 일이 일어날 때 우리는 무엇을 할 수 있습니까?
이미지에 onerror 속성을 사용하여 대체를 설정할 수 있습니다.

다음과 같이 작동합니다.

<img
  src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-00000.jpeg"
  onerror="this.onerror=null; this.src='https://images.pexels.com/photos/159868/lost-cat-tree-sign-fun-159868.jpeg'"
/>

onerror를 사용하여 오류를 null로 설정하고 이미지의 src를 폴백으로 설정합니다.
우리의 경우 사라진 고양이 사진입니다.

Note: It's not a great practice to rely on external images. You ideally want to have the fallback image locally in the file system, so it's a reliable fallback.

다음 CodePen에서 실제로 작동하는 것을 볼 수 있습니다.
첫 번째 이미지가 로드되고 두 번째 이미지가 깨집니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나