이번 주에 가정 평가를 수행하는 동안 전에는 생각하지 못했던 문제에 직면했습니다. 이미지 src가 손상되면 어떻게 됩니까?

귀엽지 않아 또한 페이지에서 어떤 종류의 서식 지정이나 스타일 지정을 사용하는 경우 페이지 전체에 렌치를 던질 수 있습니다.

집으로 가져가는 평가를 위해 일부 데이터를 반복하고 "팀 명단"을 만들어야 하는 작업 중 하나가 필요했습니다. 각 팀 구성원은 이름, 직함 및 약력과 함께 프로필 사진이 포함된 카드를 가지고 있었습니다. 모든 이미지가 일관된 크기가 되기를 바랐습니다. 이 크기는 CSS와 함께 아름답게 작동했습니다. ... 이미지 src URL 중 하나가 깨졌다는 것을 깨달았습니다. 파멸의 깨진 이미지 아이콘이 화면에 나타나서 내 모든 수고와 서식을 엉망으로 만들었습니다.

가난한 프로그래머는 무엇을 할 수 있습니까? 여기에서는 React 애플리케이션에서 이 작은 문제를 해결하는 과정을 단계별로 살펴보겠습니다!

1단계: 기본 이미지 선택

이미지가 손상된 경우 SRC를 대체할 기본 이미지를 결정하십시오! 머리의 실루엣, "이 이미지는 깨진 기호입니다." 또는 빵 한가운데에 코가 있는 코기 등 원하는 것을 선택할 수 있습니다.

그런 얼굴로 이미지가 깨져도 누가 신경을 쓰겠습니까?

2단계: 항상 Alt 속성을 포함해야 합니다.

이것은 일반적인 지식이지만 사용하는 alt모든 img태그에 속성 을 항상 포함해야 함을 상기시켜 드리고 싶습니다 . 이는 이미지가 깨진 상황에서 중요할 뿐만 아니라 스크린 리더가 애플리케이션에 더 쉽게 액세스할 수 있도록 하는 것 또한 중요합니다. 익숙하지 않은 경우 다음과 같이 표시됩니다.

<img src="www.dog-pics.com" alt="funny picture of a corgi">

이제 SRC를 선택한 기본 이미지로 변경하는 React 구성 요소 내부에 함수를 만들 것입니다.

const addDefaultImg = ev => {
   ev.target.src = "default-dog.jpg"
}

4단계: onError를 사용하여 함수 호출

해당 함수를 호출하기 위해 우리는 onError태그가 렌더링될 때(즉, src가 깨졌을 때) 오류가 있을 때마다 호출되는 React의 프레임워크에 있는 속성 을 사용할 것 입니다. 확인 해봐:

<img src="www.dog-pics.com" alt="funny picture of a corgi" onError={addDefaultImg}>

그리고 그게 다야! 이미지 중 하나가 깨지고 빠르게 포착하지 못하는 경우를 대비하여 기본 이미지를 추가하는 매우 빠른 방법입니다. 즐거운 코딩!