img 태그로 이미지를 읽을 수 없을 때 아무 것도 표시하지 않기를 원합니다.

<img> 태그를 사용해 화상을 표시했을 때에, 읽을 수 없으면 이런 느낌이 된다.

<img src="https://example.com/noimage.png" alt="プロフィール" />

불러올 수 없는 경우에, 이런 느낌으로, 아무것도 표시하지 않게 하고 싶었을 때의 비망록.

방법은 이런 느낌.

<img
  src="https://example.com/noimage.png"
  alt
  onerror="this.onerror = null; this.src='';"
/>

포인트는 다음 2점

alt 빈 문자로 설정

onerror에서 src를 비우고 onerror를 null로 설정

1. 「 alt 를 공문자로 설정」에 대해

이미지가 표시되지 않으면 대신 alt 속성 텍스트가 표시됩니다.
이 alt 속성이 없으면 읽을 수없는 이미지가 표시됩니다.

그래서 alt 속성에 빈 문자를 지정하면,
"이미지가 표시되지 않으면 대신 빈 문자를 표시합니다."

2. 「 onerror 에서 src 를 비우고」에 대해서
onerror 속성을 설정하면 이미지를 읽지 못하면
어떠한 처리를 할 수 있다.

이 기사 에 의하면, src와 alt가 모두 공문자라면, 읽을 수 없는 화상이 표시되지 않게 한다.

Firefox, Chrome, IE에서 배트 표시를 숨기려면 다음 상태 중 하나여야 합니다.
· src 속성이 빈 문자 AND alt 속성이 있음/빈 문자
· src 속성 없음

따라서 onerror를 사용하여 이미지를 읽을 수 없을 때 src를 비웁니다.

3. 「onerror를 null로 한다」에 대해서

또한 src를 빈 문자로 설정하면 여전히 이미지를 읽을 수없는 상태가 계속되므로onerror 가 반복적으로 호출되기 때문에 onerror 가 무한대로 계속 호출됩니다.

따라서 src를 비우는 것과 함께 onerror를 초기화하여 호출되지 않도록합니다.