리액트에서 이미지 엑박

이미지를 public 폴더에 넣어놓고 잘뜨던 이미지가 갑자기 엑박이 뜨면서 오류가 났다.

찾아보니 엑박을 해결하는데에는 몇가지 방법이 있었는데

<img src={require("이미지 경로").default} />

먼저 이방법으로 사용했었지만 해결은 안되었고,,,

 

 

process.env.PUBLIC_URL를 사용하여 해결하였다. 

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

리액트 공식문서 참고: https://create-react-app.dev/docs/using-the-public-folder/