React(7) img 넣는법

목차

이미지넣는법

- App.css에 넣는법

- App.js에서 src폴더의 이미지 넣는법

- public폴더에서 이미지 넣는법

---

이미지 넣는법

 

App.css에 넣는법

• src폴더에 사진파일 justdo.jpg 하나 넣었다고 하자.
• 이를 css 폴더에서 불러오려면,

• 1. App.js에서 여느태그를 열고(여기에서는 <div>로 하겠다) className을 지정해주고,
  

 

• 2. App.css에서 호출하여서 사용하면된다. 이때 사용되는 코드는 background-image: url(이미지경로) 이다.

App.css에 넣는법

 

---

App.js(html)에서 src폴더의 이미지 넣는법

• 이미지에 대한 import를 작성한 다음에,
  
• 이미지를 넣으려는 태그에, 작성한 변수를 넣으면 된다. 코드는 이러하다.
  *** background-image: url('./img/justdo.jpg'); 주석 처리 하고 ***
  

App.js에 넣는법

• 이 때, justdo 라는 변수를 사용하기위해, url(justdo)라고 해야하지만, 인식을 못하므로,
  'url(' + justdo + ')'
  이렇게 따옴표와 +를 넣도록 하자!

---

public폴더에서 이미지 넣는법

• App.js에다가, 평소 html하듯이, img src="절대경로 및 상대경로"를 타이핑 하게되는데,
  이 때, public폴더에 있는 사진이라면, ./이미지 경로가 아닌
  그냥 /이미지경로 로 넣을 수 있다.
  
  

public 폴더에 넣는법

🔥 주의점 & 이렇게 되는 이유 & 해결방법 :
주의점 -> joy_joon.com 등에 이미지를 넣을 때는 되지만, joy_joon/board 같은 서브경로로 이루어진 사이트에 안될것이다.
이유 -> bundling이 될 때, public에 있는 사진들은 압축이 안되어서 build가 되므로 그렇다.
해결방법 -> public폴더에 이미지파일을 넣고, Create React App 공식사이트에 공식 추천하는 문법인,
<img src = {process.env.PUBLIC_URL + "/justdo2.png"} />; 
로 작성하면 된다.