image 태그에 default 값 넣기

Question

이미지를에 대한 url을 DB에서 가져오는것은 성공하는데 해당 스트링을 img tag의 src에 넣으면 이미지를 불러오지 못하고 아무것도 뜨지를 않습니다. 아마 url이 잘못된 것 같은데 이런경우 제가 설정한 이미지파일을 default로 보여주고 싶습니다.

<img src={imageUrlString ?? defaultImageUrlPath}>
이런식으로 default 처리를 해도 imageUrlString은 string이 들어있는 것이라서 default 처리가 안됩니다. 혹시 방법이 있을까요?

엄홍재 · Answer

onError를 사용해 보면 어떨까요?

img 태그에는 onError속성이 있습니다.

<img 
  src={imageUrlString}
  onError={e => {
    e.currentTarget.src = defaultImageUrlPath
  }
>

이런식으로 처리하면 이미지 url을 못 불러왔을때 default 처리를 할 수 있습니다. 추가적으로 defaultImageUrlPath도 못불러 오게되면 계속 에러가 생겨 무한루프에 빠질수도 있다고 합니다.
default는 해당 프로젝트의 static 파일로 관리해서 가져오는게 안전해보입니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/img#%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC_%EA%B0%80%EC%A0%B8%EC%98%AC_%EC%88%98_%EC%97%86%EC%9D%84_%EB%95%8C