이미지를 가져오는 여러가지 방법

프로젝트를 진행하면서 이미지를 어디에 보관하고 어떻게 가져오는게 좋은지에 대한 궁금증으로 인해서 블로그를 작성하게 되었다.

게티이미지뱅크

1. 어느 폴더에서 관리하는게 좋지?

 

📂 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 환경변수로 설정을 변경할 수 있다.

 

2.  폴더에서 이미지 가져오기

 

0) 절대경로와 상대경로

• 절대경로 : 최상위 폴더가 반드시 포함된 경로
• 상대경로 : 현재 폴더(비교 대상)을 기준으로 작성된 경로

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

1) public폴더에서 가져오기

public폴더안에 logo512.png 파일이있다고 하자.

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

export default App;

jsx파일에서 절대경로는 public폴더를 기준으로 하기 때문에 절대경로를 적을때 하나만 적으면된다.

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

 

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

1. src={`${process.env.PUBLIC_URL}/logo512.png`}
2. src={'/logo512.png'}
3. src={'logo512.png'}

 

 

 

2) src폴더에서 가져오기(import) 

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

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

export default App;

파일을 못찾을 경우 compile에러가 발생하여 코드를 작성할 때 수정할 수 있다.

 

3) src폴더에서 가져오기(require)

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

export default App;

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

 

CSS에서 이미지 가져오기

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

CSS에서는 절대경로와 상대경로 둘 다 사용가능하다.

다만 CSS는 src폴더를 기준으로 절대경로가 설정되기 때문에 유의해야한다.

 

 

래퍼런스

https://velog.io/@hye_rin/React-public-src%ED%8F%B4%EB%8D%94%EC%97%90-%EB%94%B0%EB%A5%B8-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%8C%8C%EC%9D%BC-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0#0-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C%EC%99%80-%EC%83%81%EB%8C%80%EA%B2%BD%EB%A1%9C

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#-public