공부를 하면서 주로 오픈 API를 가지고 했었는데,
이번에 혼자 만든 개인 프로젝트를 하면서 처음으로
로컬 이미지를 어떻게 CRA프로젝트에 가져와야하는지
에 대해 고민을 하게 되었습니다.
그리고 공부한 내용을 기록으로 남겨보려 합니다.
PUBLIC_URL
환경 변수를 사용해야합니다.manifest.webmanifest
처럼 build 된 결과물에서 특정한 파일 이름이 필요한 경우function App() {
return(
<img
src={`${process.env.PUBLIC_URL}/public_assets/logo512.png`}
alt="React"
/>
);
}
export default App;
만약 파일을 찾지 못할 경우 컴파일 에러는 일어나지 않고, 이미지 깨짐 표시가 뜬다.
🤓 public 폴더에서 이미지 가져오기 위한 3가지 방법
1. src={${process.env.PUBLIC_URL}/public_assets/logo512.png}
}
2. src={'/public_assets/logo512.png'}
3. src={'public_assets.logo512.png'}
가능한지 확인하기 위해 여러 문서들을 확인해본 결과 public 폴더에서 가져오는 방법은 없습니다.
시도할 경우 css 파일에서 절대 경로를 설정하면 src 폴더를 기준으로 경로를 찾기 때문에
src 폴더 내에서는 해당 파일을 찾을 수 없다는 내용의 에러가 나온다고 합니다.
IMAGE_INLINE_SIZE_LIMIT
환경 변수로 설정을 변경할 수도 있습니다.import logo from "./src/src_assets/logo512.png";
function App() {
return(
<img src={logo} alt="React" />
);
}
export default App;
function App() {
return(
<img src={require('./src_assets/logo512.png).default} alt="React" />
);
}
export default App;
require
로 문서의 어디서나 파일을 불러올 수 있습니다.default
를 붙이는 이유는 require를 사용하면 객체 형태로 값이 리턴되기 때문에,위에서 얘기한 것과 같이 절대 경로를 설정하면 src 폴더를 기준으로 찾기 때문에
상대 경로, 절대 경로 둘 다 적용이 가능하다고 합니다.
background: url("./src_assets/logo512.png");
background: url("src_assets/logo512.png");
Using the Public Folder
Adding Images, Fonts, and Files
참고 자료