React 이미지 경로 public폴더 설정시 애러

다른 작업 폴더에서 작업을 하고 클론받은 프로젝트 파일에 옮겨서 작업하려고 했을때, 이미지를 넣어두는 곳을 정하지 않아서 일단 public 폴더에 images 폴더를 만들어 넣어보려고 했는데 계속 불러올 수 없다고 하길래 궁금증이 생겼다.

처음에는 상대경로 설정을 잘 못 작성했나 해서 이곳저곳 넣어보며 확인했는데 public에 들어가면 애러가 발생했다.

먼저 결론을 말하자면 import하지 않고 css(스타일드컴포넌트 사용중) url에 상대경로를 넣어주니 제대로 나오긴 했다. jsx에서 public 폴더의 접근하려면 환경변수를 사용하라는게 공식문서에 있다고 한다.

(아니 근데 왜 images경로를 빼도 이미지가 나오는거지?.. 두개 다 정상적으로 이미지가 나오는데.. 원래 경로설정이 하위폴더를 안적어도 찾아주는건가?)

어느 경우에 public, src 폴더에서 이미지를 관리하면 좋은지, jsx, css에서 어떻게 이미지 경로를 설정하는지 방법이 다른것 같다.

---

어느 폴더에서 관리하는 게 좋은가?

📂 public

• webpack에 의해 관리되지 않는다. (minify되지 않고, content hash가 포함되지 않는다) 대신 원본이 build폴더에 복사된다.
• public 폴더에 접근하기 위해서는 PUBLIC_URL 환경변수를 사용해야한다.(공식문서)
• 경로가 잘못 되었거나 파일이 없을 경우 컴파일단계에서 에러가 발생하지 않고, 404 에러가 발생한다.👎
• CRA 문서에서 다음과 같은 경우에만 public 폴더에서 관리하는 것이 유용하고, 이외에는 src 폴더 관리를 추천한다.
  • manifest.webmanifest 처럼 build된 결과물에서 특정한 파일 이름이 필요한 경우
  • 수천개의 이미지 파일을 동적으로 참조해야 하는 경우

📂 src

• 파일을 찾지 못하는 경우, 컴파일 단계에서 에러를 잡을 수 있다.👍
• import할 경우 참조할 수 있는 경로(path) 문자열을 출력한다.
• content hash가 파일명에 포함되기 때문에 브라우저가 오래된 버전(파일 수정 전)의 파일을 캐싱하고 있는 경우를 고려하지 않아도 된다. (파일이 변경되었을 때만 hash값이 변경된다)👍
• 서버 요청 횟수를 줄이기 위해 10,000 bytes 이하의 이미지는 path대신 data URL을 반환한다.
  (bmp, gif, jpg, jpeg, png 파일에만 적용, SVG 파일 제외)
  이 때, 파일 크기 기준(10,000 byte)은 IMAGE_INLINE_SIZE_LIMIT 환경변수로 설정을 변경할 수 있다.

 jsx 에서 이미지 경로 설정

1. public 폴더에 있는 이미지

function App() {
  return (
    <img
      src={`${process.env.PUBLIC_URL}/public_assets/logo512.png`}
      className='App-logo'
      alt='React'
    />
  );
}

export default App;

파일을 못찾을 경우 컴파일 에러는 발생하지 않고 이미지가 깨진다.

public 폴더에 있는 이미지를 jsx에서 사용할 경우 공식문서에서는 환경변수의 PUBLIC_URL을 사용하라고 나와있지만, 단순히 /이미지경로, 이미지경로 이런 식으로 지정해도 잘 불러왔다.

즉 아래 3가지 경로 다 가능
1. src={`${process.env.PUBLIC_URL}/public_assets/logo512.png`}
2. src={'/public_assets/logo512.png'}
3. src={'public_assets/logo512.png'}

2. src 폴더에 있는 이미지(import)

import logo from './src_assets/logo192.png';

function App() {
  return (
    <img src={logo} className='App-logo' alt='React' />
  );
}

export default App;

webpack을 사용하면 CSS 파일을 import 하는 것처럼 이미지 파일을 import하여 사용할 수 있다.
파일 최상단에서 사용하는 모든 이미지를 import하여 사용하는 동기적인 방법으로 webpack이 이미지 파일을 번들에 포함시킨다.
파일을 못찾을 경우 compile에러가 발생하여 코드를 작성할 때 수정할 수 있다.

3. src 폴더에 있는 이미지(require)

function App() {
  return (
    <img src={require('./src_assets/logo192.png').default} className='App-logo' alt='React' />
  );
}

export default App;

node.js 환경이기 때문에 require로 문서 어디서나 파일을 불러올 수 있다. 이 방법을 사용하면 inline으로 src의 이미지 파일경로를 바로 지정할 수 있다. 처음에 모든 이미지 파일을 import 하지 않아도 되기 때문에 편리해보인다.

<img src={require('./src_assets/logo192.png').default} />

✅ content hash, dataURL 확인

import logo from './src_assets/logo.svg';

function App() {
  return (
    <>
      <img src={require('./src_assets/logo.svg').default} className='App-logo' alt='React' />
      <img src={logo} className='App-logo' alt='React' />
    </>
  );
}

import 와 require 방식의 차이가 있을까 궁금하여 두 개의 img를 비교해보았다.
두 방식의 차이는 없었지만, logo192.png 파일의 경우 10,000byte이하여서 dataURL이 리턴된 것을 확인할 수 있었고, logo.svg 파일로 테스트했을 경우에 파일명 뒤에 동일한 content hash 값을 확인했다.

---

css 에서 이미지 경로 설정

Failed to compile ./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!
css파일에서 public 폴더에 접근하려고 하면 위와 같은 에러가 발생한다.
css파일에서 절대경로를 설정하면 src폴더를 기준으로 경로를 찾기 때문에 src폴더 내에서는 해당 파일을 찾을 수 없다는 에러였다.

꼭 public 폴더의 이미지를 적용해야 한다면 inline-style로 css를 적용할 수는 있다.

<div style={{ backgroundImage: 'url(/public_assets/logo512.png)' }}></div>

🚨 절대경로 설정시 루트 폴더 기준
jsx 파일에서 절대경로는 public폴더를 기준으로 한다.
css파일에서 절대경로는 src폴더를 기준으로 한다.

---

CRA 이슈 정리

• #9937 public directory css url
• #10022 CRA 4 fails to compile when css background-image ulr('url') not resolved

 CRA 레포에도 이슈와 많은 댓글이 등록되어 있었다.
절대경로의 기준이 다르고, public 폴더의 이미지를 설정할 수 없어서 불편함을 느끼는 사람들이 있었지만, 결론은 src폴더에서 이미지를 관리하세요 였다.

src 폴더에 있는 이미지

절대경로도 src 폴더를 기준으로 하기 때문에 아래처럼 상대경로, 절대경로 다 사용 가능하다.

background: url("./src_assets/logo192.png");
background: url("src_assets/logo192.png");

 

 

출처:

https://velog.io/@rimo09/React-Create-react-app-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C%EB%A5%BC-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-4%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95#1-public-%ED%8F%B4%EB%8D%94%EC%97%90-%EC%9E%88%EB%8A%94-%EC%9D%B4%EB%AF%B8%EC%A7%80

CRA - Using the Public Folder

CRA - Adding Images, Fonts, and Files