본문 바로가기
FrontEnd/React.js

[React] img태그 src public 폴더에서 가져오기

by Chaedie 2022. 8. 1.
728x90

서론 넣고 싶은데 그냥 본론만 넣겠습니다
아 서론 생각났어요!!!!!

  • React 과제 설명에서 public 폴더에 images 폴더 만들어서 이미지 다 넣으라고 하고, img태그는 src값을 '/images/이미지 파일이름'으로 지정하면 된다고 설명이 되어 있었다. 하지만 이 방법은 src폴더 내에 images 폴더가 있을 경우에는 가능한 방법이지만, public 폴더에 있다면 적용이 불가능한 방법이었다.
  • 자료가 잘못되어 있는건지, 의도적으로 구글링과 공식 문서 등을 통해 문제해결하는 과정을 겪게 만들려는건지 나는 알 수 없지만, 어쨌든,,, 구글링과 공식문서를 통해 문제를 해결했다.

해결 방법

<span>HTML 문서 안이라면 아래와 같이 '%PUBLIC_URL%'이 퍼블릭 폴더의 경로임
`<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />` 
jsx 내에서 사용할 땐 아래와 같이 {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'} />;
}

공식 문서 링크는 요기요

여담

오늘도 공식 문서가 답을 주었다. 공식 문서 의문의 1승


내용 추가!!!!!!!

public 폴더안에 들어 있는 애들은 그냥 '/images/...' 이런식으로 바로 접근이 가능합니다... process.env.PUBLIC_URL 이 전혀 필요 없었네요 허허 🤣🤣

댓글