[react js] 이미지가 로드가 되지 않았을 때 기본 이미지 보여주기

<img> 의 src 이미지로드할 때 이미지가 오류가 나거나 링크의 주소가 잘 못될 을 경우 기본이미지를 보여주고 싶을 때가 있다.

 

React.js에서 이미지 로딩이 실패하거나 링크가 잘못될 경우, 기본 이미지를 보여주고 싶다면, onError 이벤트를 사용하면 됩니다.

이 이벤트는 이미지 로딩이 실패했을 때 발생합니다.

 

import React from 'react';
import defaultImage from './default.png';  // 기본 이미지를 가져옵니다.

function ImageComponent({ src }) {
  const handleImageError = (e) => {
    e.target.src = defaultImage;
  }

  return (
    <img 
      src={src} 
      onError={handleImageError} 
      alt="이미지" 
    />
  );
}

export default ImageComponent;

 

prop의  src 은 이미지의 URL을 가리킵니다. 만약 이 URL의 이미지가 존재하지 않거나 어떤 문제로 인해 로딩이 실패하면, onError 이벤트가 발생하고 handleImageError 함수가 실행됩니다. 이 함수에서는 **e.target.src**를 기본 이미지로 바꾸어 로딩 실패한 이미지 대신 기본 이미지를 보여주게 됩니다.

위에서 defaultImage 는 임의의 기본 이미지를 import 한 것이므로, 실제 사용 시에는 원하는 기본 이미지의 경로를 지정해주시면 된다.