🐛 [24.10.15] 이미지 로드 실패시 발생한 문제 해결 #40

[wynter24]

문제 상황

1. 이미지 로드 실패 시 무한 요청 문제 발생
2. 배경 이미지의 로드 실패 시 에러 메시지 및 스타일 처리가 정상적으로 이루어지지 않는 문제

재현 가능 여부

• 예
• 아니오

코드

1. 에러 상태를 관리하여 무한 로딩 방지

• 에러 상태 업데이트 (setHasImgError)
  • 이미지 로드에 실패할 경우, img.onerror 핸들러가 실행되어 setHasImgError(true)로 이미지 에러 상태를 true로 변경합니다.
  • 이 에러 상태가 true로 설정되면, 이후 다시 이미지 로드를 시도하지 않도록 코드 흐름을 제어합니다.
• 상태에 따른 로드 로직 차단
  • 이미지가 로드될 때마다 hasImgError 상태를 확인하여, 에러 상태인 경우 이미지 로드와 관련된 작업을 중단합니다.
  • 즉, 이미 에러가 발생한 이미지는 더 이상 로드되지 않고, onError 핸들러에서 무한 요청이 발생하는 것을 막습니다.
• 대체 이미지 설정
  유효한 URL인지 확인한 후, 비정상적인 URL이 들어왔을 경우, 투명한 빈 그림을 대체 이미지로 사용합니다.

2. 배경 이미지

• 이미지 로드를 비동기적으로 처리
  이미지 생성자를 사용, 비동기적으로 로드하여 성공 여부를 확인하고, 로드 실패 시 에러 상태를 업데이트합니다.
• 스타일 조건 설정
  이미지 에러가 발생하지 않고 올바른 형식의 주소(http:// 또는 https://로 시작)일 때(조건), 변경된 스타일이 적용되도록 합니다.

기타

대체 이미지 / 이미지 속성 / Image의 onError 속성
Image 생성자 - MDN
[트러블슈팅] 무한 로딩 / [트러블슈팅] 배경 이미지