✅ 이미지를 삽입해보쟈
🔸 css에서
- src 폴더 내에 이미지를 넣어주고(폴더 생성해서 모으면 깔끔!)
- 태그에 배경화면으로 설정해주기
// css파일에서~예시코드~
.title {
background-image : url('./img/title.png');
}
🔸 jsx(tsx)파일에서
- html태그가 들어오는 함수 컴포넌트의 return문 안에서 이미지 넣어주기
- 그런데 이 경우에는 파일 경로로 바로 사진을 지정할 수 없다!!
=> import 문법으로 반드시 import 후 변수로 넣어줘야함!!import titleImg from './img/title.png';
function Test(){
return(
< div style = {backgroundImage :url(${titleImg})} />
// template literal
< img src = {titleImg} />
)
}
🔸 public폴더에 이미지파일 넣기
- 사실 위 jsx 방법은 사진이 많아지면 계속해서 import 해야하는 불편함이 있다
- 이는 public 폴더에 이미지 파일을 넣음으로써 해결할 수 있는데,
- public 폴더에 img등 폴더 만들어 사진을 넣어준 뒤
< img src = '/title.png' />
- 이렇게 '/' 하나 넣어주고 파일명 써 넣으면 끝!!
❗️public 폴더 사용의 주의점❗️
- 사이트 경로문제
- 메인페이지에서는 파일명 앞에 '/'만 넣어서 써도 상관 없지만,
- 사이트 사용환경에서 경로에 따라 url이 계속 바뀌면 해당 경로를 모두 '/'앞에 맞춰 써줘야 하는 단점이 있다
- 물론 해결법도 존재
// create-react-app 공식문서 내용
< img src = {process.env.PUBLIC_URL + '/title.png'} />
// 현재 사이트 경로 의미
- import 문제
- 또, public 폴더에 넣어둔 이미지 파일은 import 문법으로 불러올 수는 없다!!
- 그렇게 하면, 이런 오류문이 뜨는데,
// 오류문
Module not found: Error: You attempted to import ../public/img/title.png which falls outside of the project src/ directory.
Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/. - import는 src 폴더 범위에서만 가능하다는 이야기!!
🌟 잘못된 부분에 대한 말씀은 언제나 저에게 큰 도움이 됩니다. 🌟
👍 감사합니다!! 👍
