본문 바로가기

Reactjs

이미지 파일 안뜰때 대처법, 이미지 에러 해결법 (onError)

반응형

웬만한 프로젝트나 사이트에 이미지는 화면의 구성감을 위해서나 어떻게 보면 빠질 수 없는 요소인데 이미지 주소가 변경 되었거나 확장자가 문제가 있거나 빈 이미지가 나올 경우가 있다. (물론 잘 정리된 api, db, 올바른 주소일 땐 그럴 경우가 없겠다링~)

 

img 태그의 onError 속성을 이용하면 간단히 해결 할 수 있다. 

 

 

이런 식으로 사진들이 저장된 주소로 사진들을 가져와서 뿌려주는데 확장자 문제인지 이미지 아이디 값이 바뀐건지 나오지 않는 경우가 있다. 

 

 

 

요로코롬 img 태그에 onError 이벤트에 함수를 만들어줘서 디폴트 이미지로 대체가 가능하다. 

 

방법은 이것만 있는게 아니라 찾아보니 display:none 등 안보이게, 이것처럼 디폴트 등 다른 방법이 있지만 결론은 onError를 이용해서 동작하는 것이니 이미지 관련해서 처리할 때 팁 정도로 알고 있으면 좋을것 같다. 

 

반응형

'Reactjs' 카테고리의 다른 글

React react-datepicker 사용법  (0) 2021.08.25
깔끔한 view단 코드 만들기  (0) 2021.08.19
useRef() 여러개 관리 하기  (0) 2021.07.22
MERN STACK 이란  (0) 2021.06.30
e.target 과 e.currentTarget 차이점과 쓰는 방식  (0) 2021.06.28