백그라운드 이미지 관련

[김민성]

점보트론안에 이미지를 넣으려고하는데 경로문제인지 에러가 뜨네요

Can't resolve '/market.jpg' in '/Users/minseong/VSC-workspace/tutor-react/src'

라는데 사진 퍼블릭 폴더에 잘 넣었고 css 클래스이름도 일치시켰고 사진이름 확인했는데 무엇이 문제일까요?

[codingapple]

요즘은 public 폴더에 넣으면 안되는듯요 src폴더에 넣도록 합시다 

[김민성]

src에 넣고 앞에 / 빼니깐 잘 동작하네요 감사합니다 강의 잘듣고있어요 ^^

[김민성]

아아앙아ㅏ아아아 알았습니다. public 폴더안에 images폴더를 만들면 리엑트가 images폴더를 뒤져줍니다. 

다른사람도 볼수있게 댓글 달아놓을게요.

[박진주]

저도 이런데.. 이거 해결방법 src 폴더에 넣는 방법밖에 없나요? 민성님 어떻게 해결하셨는지 자세히 알려주실 수 있을까요?

[김민성]

소스폴더 말고 퍼블릭 폴더에다가 님이 폴더를 하나 만드세요 이름은 images로...

그리고 거기 안에다가 사진을 넣어보세요.  경로명 주의하시고요

[전상아]

혹시나 저처럼 public 폴더 안에 images 폴더를 넣어도 해결 안되는 분들을 위해 제가 찾은 해결법 공유해요.

node_modules/react-scripts/config/webpack.config.js  121번째 라인

options: cssOptions를

options: {...cssOptions, url:false}, 로 바꿨더니 해결됐습니다.

[이석주]

머가 마즌ㄴ거지

[codingapple]

리액트로

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 폴더를 만드셔야 이용가능)
 

다만 public 폴더 안에 넣을 경우 사이트 주소가 좀 이상하거나

리액트프로젝트를 서브경로에 발행하는 경우엔 경로가 망할 수 있으니 src를 이용하거나 

https://create-react-app.dev/docs/using-the-public-folder 참고합시다 

 

[김민성]

multer로 이미지 처리하는 중인데 상품코드 고유번호로 디렉토리를 만들고 이미지들을 안에 넣는 방식으로 관리하고있어요

근데 빌드를 해버리면 다 날라가 버리더라고요 assets폴더는 빌드해도 안 날아가나요?

[글쓴이]

글