react에서 이미지 가져오는 법

1. css파일에 url 넣어주기
2. html에서 이미지 넣어주기
3. public 폴더 이용하기

1. css파일에 url 넣어주기

css파일 안에서 class등으로 스타일을 선언해주고, 거기 안에 이미지 url을 적어준다.

.main-bg {
  height: 300px;
  background-image: url("/public/img/bg-1.png");
  background-size: cover;
  background-position: center;
}

App.js에서는 class를 박은 div를 통해 img를 가져옴.

      <div className="main-bg"></div>

2. html에서 이미지 넣어주기

1. 이미지 import해오고 html 태그 안에서 style로 가져오기
   src폴더 안에 있는 img 파일을 가져와서 보여줄 수 있음.
   근데 이 방법은 뭔가 코드가 더러워질거 같아서 안쓸듯.

2. img 태그의 src에 경로입력하여 가져오기

//1번째 방법
import bg from './bg.png'

<div style={{ backgroundImage : 'url(' + bg + ')' }}>

//2번째 방법
<img src="https://어쩌구저쩌구/경로/이미지.jpg"/>

3. public 폴더 이용하기

사이트 발행전에 (build시에) html css js 파일등이 압축되어 올라감(bunding).
public 폴더 안에 넣어두면 build할때 파일이 보존됨. 유용해보임.
이미지 사용할땐 그냥 /이미지경로 써두면 됨.

• public 폴더 안에 img 폴더를 만들어서 이미지를 넣어둠.

근데 메인 주소가 아니라 /가 붙은 경로의 경우 img로딩이 제대로 안될수있음
예시 : www.메인주소.com으로는 이미지 로딩됨.
근데 www.메인주소.com/products는 로딩 안됨.
이걸 방지하기 위해, public 폴더의 이미지 쓰는 권장방식 : process.env.PUBLIC_URL 붙여주기

• vite 프로젝트는 적용이 안될수 있음. import.meta.env.BASE_URL 붙여줌.

import bg from "/img/bg-1.png";
<img src={process.env.PUBLIC_URL + bg} />

뻘짓

useState도 배웠겠다, map으로 반복문도 배웠겠다, 이것저것 배운 티좀 내면서 꺼드럭 대고 싶어서 괜히 복잡하게 코드를 짬(혹시 이리저리 바꿔먹다 원본코드 날려먹을까봐 하남자 티 내면서 원본은 주석처리함).

1. 상태의 update가 의미없는 값에 state쓰기
2. 고집부려서 state 만들고, 굳이 굳이 map 좀 써보겠다고 img/shoes1 같은 요상한 값 넣어두기
3. 왜 img 안나오지? 아 확장자 안넣어줬구나~ 하고 또 굳이 굳이 jpg 써주기.
4. 아 이미지가 너무 크네~ className 붙여주고 css파일에에 width : 80% 한 줄 넣어주기

잡탕밥 짬통코드가 완성되었다.

  const [shoesState, setShoesState] = useState([
    "img/shoes1",
    "img/shoes2",
    "img/shoes3",
  ]);
      <div className="container">
        <div className="row">
          {shoesState.map((shoes, i) => (
            <div className="col-md-4" key={i}>
              <img
                className="products"
                src={import.meta.env.BASE_URL + shoes + ".jpg"}
              />
              <h4>상품명</h4>
              <p>상품설명</p>
            </div>
          ))}
        </div>
        {/* <div className="row">
          <div className="col-md-4">
            <img src={shoes1} />
            <h4>상품명</h4>
            <p>상품설명</p>
          </div>
          <div className="col-md-4">
            <img src={shoes1} />
            <h4>상품명</h4>
            <p>상품설명</p>
          </div>
          <div className="col-md-4">
            <img src={shoes1} />
            <h4>상품명</h4>
            <p>상품설명</p>
          </div>
        </div> */}
      </div>

내일되면 지워야지.