쇼핑몰 프로젝트 이미지 삽입

[이종혁]

안녕하세요?

몇가지 질문이 있어 글 올립니다.

쇼핑몰 프로젝트 진행 중 background image 삽입중 계속 에러가 떠서 질문 글 올려봅니다 ㅠ
App.js와 App.css 임포트도 잘 되어있고 className도 똑같은것 잘 확인했는데 왜 안되는지 잘 모르겠내요
경로도 ../public 등 다 넣어봤습니다.
혹시나해서 웹 URL을 연결해봤는데 웹URL은 잘 작동하는데 public 폴더 안에 있는 이미지 주소를 넣으니 안됩니다.
아래는 에러 메세지와 제가 입력한 코드 값입니다.
<table style="border-collapse: collapse; width: 100%; height: 82px;">
<tbody>
<tr style="height: 82px;">
<td style="width: 100%; height: 82px;">

<span data-ansi-line="true">./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)</span>
<span data-ansi-line="true">Error: Can't resolve '/123.jpg' in 'C:\Users\봉구네\Documents\Github\react-shopping-mall\src'</span>

</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 100%;">
<div>
<div>.background {</div>
<div>  background-image : url(/123.jpg);</div>
<div>
<div>
<div> <Jumbotron className="background">
<div>
<div></Jumbotron></div>
</div>
</div>
</div>
</div>
<div> </div>
</div>
</td>
</tr>
</tbody>
</table>

두번째는 따봉 버튼 질문입니다 ^^;

map을 이용하면 따봉버튼이 하나로 통일되어 동작하는데
따봉 state에 array를 제목의 숫자만큼 지정해서 하던가 라고 하셨는데
제 머리로는 따봉 state array를 하드코딩하는것 밖에 떠오르지 않는데
어떤식으로 해야 하는지 잘모르겠습니다.
좀 더 쉬운 힌트좀 부탁드립니다 !

[codingapple]

1. 이미지 파일이 src 폴더 안에 있다면 ./이미지.jpg 라고 쓰셔야합니다 

이미지파일이 public 폴더 안에 있다면 /이미지.jpg 라고 쓰셔야합니다 

public 폴더안에넣으면 사이트를 build한 후에도 사이트 루트경로에 이미지가 그대로 남아있습니다. 

 

2. 일단 따봉 state 초기값을 [0,0,0] 이렇게 만들어놓았으면 

0번째 버튼을 누르면 따봉변경( ) 에 따봉state의 0번째 항목에 1을 더한 array를 집어넣기

1번째 버튼을 누르면 따봉변경( ) 에 따봉state의 1번째 항목에 1을 더한 array를 집어넣기

2번째 버튼을 누르면 따봉변경( ) 에 따봉state의 2번째 항목에 2을 더한 array를 집어넣기

라는 코드를 쭉 짜시면 됩니다. map 없이 하드코딩으로 한번 짜보시고 map으로 축약하면 이해가 쉬울 수도 있습니다. 

 

3. 힌트는 map() 함수안에 두개의 파라미터를 집어넣을 수 있습니다.

글제목.map(  (data, i)=>{} ) 이렇게 쓰시면 첫째 파라미터는 글제목 안에있던 하나하나의 데이터를 뜻하고 둘째는 0,1,2,3.. 이렇게 증가하는 정수입니다.

관련내용은 아마 뒷 강의에 출현합니다

[이종혁]

와 이 시간에 빠른답변..감사합니다 ㅠ
이미지 파일은 public 폴더에 들어간 상태입니다.
/이미지.jpg를 했을때에도 컴파일 오류가 생깁니다 ㅠ.ㅠ

[codingapple]

css파일에서 public 폴더에 있는 이미지 불러오고 싶으면 /어쩌구.jpg 하면 잘 불러올 수 있습니다. 

혹시 저장안한거아닙니까 can't resolve 어쩌구는 ./ 경로가 문제있을 때 나오는 에러같은디요

[이종혁]

저장 다 했구 이미지도 vsc에서 public 폴더에 잘 있는것 확인했습니다..
css도 import './App.css'; 잘해놨는데... 흠

app.js에서

<img src="./123.jpg" width="100%" />

이렇게는 작동하는데 왜 css에서 background-image에서는 안되는지 모루겠내욤.,.

[codingapple]

그럼 경로가 잘못된 문제같습니다

프로젝트파일 전부 (node_modules 폴더 빼고) 하단 플러스친구 카톡이나 이메일로 보내주시면 확인해보겠습니다 

[codingapple]

(해결) 16버전에선 가능하지만 리액트 17버전 이상에서는 CSS 파일에서 public 폴더안에 있는 이미지를 바로 그냥 /이미지.jpg 이렇게 가져다쓸 수 없는 것 같습니다

필요한 이미지는 src 폴더 안으로 옮기고 ./이미지.jpg 이렇게 사용하시면 되겠습니다

[글쓴이]

글