[React] 이미지 미리보기 C: 경로에 있는 파일 불러오기

2025.07.04 - [JAVA] - [Java] 이미지 미리보기 C: 경로에 있는 파일 불러오기

[Java] 이미지 미리보기 C: 경로에 있는 파일 불러오기

 

클라우드로 업로드하는 방식이 아닌 특정 폴더에 이미지를 업로드 할때 저장하는데 이미지를 특정 폴더 및 파일에서 읽어서 불러오는 방법을 설명하고자한다. 우선은 나는 세팅을 이렇게했다 .env 파일을 사용중이다.

 

 

 

 

1.env 설정

REACT_APP_API_URL="http://localhost:9090/api/in"
REACT_APP_IMG_DOMAIN="http://localhost:9090"

 

 

2.이미지를 불러오는 컴포넌트에 REACT_APP_ING_DOMAIN 을 import해온다.

// 서비스키를 환경변수로 관리 (REACT_APP_HOLIDAY_API_KEY)
const IMG_DOMAIN = process.env.REACT_APP_IMG_DOMAIN || "";

 

3.위에 JAVA 에서 처럼 이미지를 업로드한 이후 DB에 업로드된 imgPath와 imgFname을 가져와야한다,

즉 해당 폴더에 파일을 읽어서 가져와야하기떄문이다. 만약가져오면은 /upload/test/test1/test11111.png 라고 가져올것인데 이거를 부를수가없다.. 일반적으로는 src/asset/image/ 즉 프로젝트안에 있는 이미지를 불러오는거는 가능하지만 C드라이브에있는 로컬에 있는 폴더에 파일을 읽을 수 있는 직접 권한이 없기떄문인다. 

 

4. 3번을 우선 해결해야하니 테스트를 해보자 

  const [imageSrc, setImageSrc] = useState<string>("");
  
  //propsInfo는 API를 호출해서 담겨져있는 Response 값이다.
  useEffect(() => {
    if (propsInfo?.imgPath && propsInfo?.imgFname) {
    //이와같이 경로를 짜면은 
    http://localhost:9090/uploads/SewingSystem/QrImg/VINA/32001000003.png에 이미지를 불러온다.
      const fullImageUrl = `${IMG_DOMAIN}${propsInfo.imgPath}${propsInfo.imgFname}`;
      setImageSrc(fullImageUrl);
    }
  }, [propsInfo]);

 

 

5.NoImg가 바뀐것을 확인할수있다.

const ImagePreview = styled.img`
  max-width: 100%;
  max-height: 100%;
`;

<ImagePreview
    src={imageSrc || noImage}
    onError={(e: any) => {
    (e.target as HTMLImageElement).src = noImage;
    }}
    alt="미리보기"
/>

 

따로 전체소스를 공유하지는 않았지만 필요로 하면은 공유해줄 수 있다. 

우선은 이 글을 읽기전 JAVA 에 소스를 먼저 적용을 해야한다.