인프런 커뮤니티 질문&답변

저는 html대신 react를 사용해서 프로젝트를 진행중인데요.
단순히 html로 프로젝트를 진행할 때는 아무 이상없이 미리보기 이미지도 잘 나오고 이미지 정보도 db에 저장이 잘됩니다.

그런데 react를 사용해서 하면 미리보기 이미지가 불러와지지 않습니다.
그래서 구글링해본 결과 파일 경로 앞에 http://localhost:8005를 붙어야 한다, encodeURI함수를 이용해서 경로를 변환시켜줘여 한다. 등 나와있는 정보대로 해보았지만 다 안되네요..
그러다가 FileReader를 사용해서 파일 경로를 데이터URI형식으로 변환해야 한다고 해서 해봤는데 이걸 사용하며는 img가 잘나오더군요. 문제는
FileReader를 사용하여 파일을 변환하면 파일의 경로가 너무 길어져 413에러가 발생합니다..

그래서 리액트에서는 대체 어떻게 img를 다뤄야 할지 잘 모르겠습니다..


아래 코드들은 리액트에서 다양한 방법으로 경로 설정을 하고 그 후 개발자 도구에서 복사해온 태그들 입니다.
물론 한개도 제대로 나온 이미지는 없습니다

1.html로 프론트를 다뤘을때랑 같은 코드(실행은 리엑트에서 하고 단순히 html로 실행하면 아래 태그는 잘 나옴)

<img id="image-preview" src="img/스크린샷%202023-08-31%20오후%201.54.471694844382032.png" alt="미리보기" />

2.local주소 붙이고 encodeURI로 경로 변환
<img id="image-preview" src="http://localhost:8005/img/%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202023-08-31%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%201.54.471694844547805.png" alt="미리보기"></img>

이런식으로 encodeURI랑 로컬주소 고려해서 경우의 수 4가지 다 해봤는데 안됐습니다.