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 이 전혀 필요 없었네요 허허 🤣🤣
'FrontEnd > React.js' 카테고리의 다른 글
[React.js] Styled Components 파일 분리 멘토 코드 리뷰 (0) | 2022.09.04 |
---|---|
[React.JS] Fetch문 Try-Catch로 Error handling하기, Async-Await로 가독성 개선하기 (0) | 2022.08.22 |
[React.JS] (Refactor) Array.filter()를 이용한 검색 기능 리팩토링 (0) | 2022.08.16 |
[React.JS] shouldComponentUpdate(), React.memo() (0) | 2022.08.15 |
[React.JS] 함수형 컴포넌트 => 클래스형 컴포넌트 (0) | 2022.08.12 |
[ReactJS] Input 창 입력에 따른 검색 기능 (Arrays.filter() 활용) (0) | 2022.08.12 |
[React.js] 나의 this만 undefined가 아닌 이유 (0) | 2022.08.11 |
[React.js] 인풋 태그 위 이미지 태그 없애기 (0) | 2022.08.04 |
댓글