계좌 연결 페이지

이미지가 화면에 보이지 않는 이유

경로 문제: **/assets/banks/${bank}.png**는 절대 경로를 나타냅니다. React 프로젝트에서 이 경로는 일반적으로 public 폴더를 기준으로 합니다. 만약 이미지 파일이 public/assets/banks/ 폴더에 없다면 이미지를 찾지 못할 것입니다12.
빌드 프로세스: React 애플리케이션은 빌드 과정에서 정적 자산을 처리합니다. src 폴더 내의 이미지를 사용하려면 일반적으로 import 문을 사용해야 합니다2 4.
파일 이름: 파일 이름에 공백이나 특수 문자가 있으면 문제가 될 수 있습니다. 파일 이름이 정확한지 확인해야 합니다9.

해결 방법:

이미지를 public/assets/banks/ 폴더로 이동시킵니다.

또는 src 폴더 내에 이미지를 두고 다음과 같이 import 합니다:

jsximport bankLogo from '../assets/banks/bankName.png';
*// ...*
<img src={bankLogo} alt="Bank Logo" />

동적으로 여러 이미지를 불러오려면 다음과 같이 할 수 있습니다:

jsximport { useState, useEffect } from 'react';

const BankLogo = ({ bankName }) => {
  const [imageSrc, setImageSrc] = useState(null);

  useEffect(() => {
    import(`../assets/banks/${bankName}.png`)
      .then(image => setImageSrc(image.default))
      .catch(err => console.error("Failed to load image:", err));
  }, [bankName]);

  return imageSrc ? <img src={imageSrc} alt={`${bankName} logo`} /> : null;
};

이러한 방법들을 시도해보고 여전히 문제가 있다면, 프로젝트의 구조와 빌드 설정을 더 자세히 확인해볼 필요가 있습니다12 4.