리액트에서 사진 image url 넣을 때 질문 있습니다!

[황다혜]

React Router 3: URL 파라미터로 상세페이지 100개 만들기 강의를 들으면서 

계속 안되는 부분이 있어서 질문합니다. Detail.js 에 Detail 컴포넌트 만들어서, App.js 에서 import 하고 상세 페이지 url로 들어가면, image가 안뜨는게 문제입니다. image 경로 좀 봐주세요! 

1.선생님과 다른 주제를 하다보니 제가 이미지를 따로 준비했습니다.그래서  images 폴더를 src 밑에 만들어서 사용했습니다. src>images폴더>image.jpg 들... 요렇게요.  그리고  Detail.js 에서 img 태그 src를 <img src="./images/chair1.jpg" width="100%" /> 이렇게하고,  localhost:3000/detail/1 로 들어가면 사진만 안떠요.
2. 그래서 Detail.js 에서 image를 import를 했어요. import image from './images/chair1.jpg';
그리고 <img src={ image } width="100%" /> 이렇게 하니까 다시 사진이 뜨긴했는데, 

 

Q. 처음 이미지 경로로 했을 때 왜 안뜨나요? 무슨 문제인지 궁금합니다. 

(구글링 했을 때, 절대 경로로 잡아줘야된다고 그래서 jsonconfig.json 도 설정했는데, 제가 뭔가 제대로 잘 못해서 해결이 안되더라구요...) 다른 페이지에서 만든 컴포넌트에서의 경로는 다르게 잡아줘야 하나요? 

이럴때, 어떻게  해결해야하나요?      
 

[codingapple]

넹 src로 넣는 기본 방법이 바뀐듯합니다 

리액트로 

src안에 있는 이미지 넣는 법 
import 이미지 from ‘./이미지경로.jpg’
<img src={이미지}>

 

src안에 있는 이미지 css파일에 넣는 법 
background-image : url(‘이미지경로’)

 

public/assets 폴더 안에 있는 이미지 넣는 법 
<img src=”/assets/이미지명.jpg”>
(public 안에 assets 폴더를 만드셔야 이용가능)

 

public/assets 폴더 안에 있는 이미지 css파일에 넣는 법 (background-image) 
없음 하지마셈 혹은 이렇게 해야함
<div style={ {backgroundImage:’url(/assets/logo5121.png)’} }>
(public 안에 assets 폴더를 만드셔야 이용가능)

[Maldive]

 이글 보고 public에 assets 폴더 만들었어요. 저도 감사합니다.

[오진희]

앗 저도  이미지 넣을때 src에 asset 폴더 만들고  몇개이미지를넣어뒀는데  html처럼 src="" 에 상대경로 로 입력해도 왜 이렇게  안뜨나 했더니.....

저렇게 이미지 하나하나 마다 다 import 해와서  src={} 안에 넣어야하는거에요?......

 

 

[codingapple]

public 폴더에 넣어두면 됩니다 

[글쓴이]

글