이미지 파일 관리 + public파일 경로

## 이미지 파일 관리하기

 

# 기본적인 native html css에서 파일 갖다 쓰는법

이런식으로 bg.png파일이 있으면

.App {
  text-align: center;
  .main-bg {
    width: 100%;
    height: 300px;
    background-image: url('./bg.png');
    background-size: cover;
    background-position: center;
  }
}

이렇게 css상으로 백그라운드로 박아줄 수 있음

뭐 자주 썼던거니까..

 

 

# react에서 파일 import해서 쓰는 방법

이렇게 image디렉토리안에 이미지를 넣고 react코드상에서 쓰려면

      <div
        className="main-bg"
        style={{ backgroundImage: `url('${bg}')` }}
      ></div>

이런식으로 넣어주면 된다.

참고로 style속성 html에다가 바로 갖다박으려면 카멜케이스써야한다.

난 그냥 s3에 넣고 href로 가져와서 쓸듯. 어차피 트래픽 요금 비슷하니까.

 

 

퍼블릭폴더 안에있는건 이름안바뀌고 압축안됨

 

      <div className="img-box">
        <Card style={{ width: '18rem' }}>
          <Card.Img variant="top" src="/img/shoes1.jpg" />
          <Card.Body>
            <Card.Title>Title</Card.Title>
            <Card.Text>dd</Card.Text>
            <Button variant="primary">Go somewhere</Button>
          </Card.Body>
        </Card>
        <Card style={{ width: '18rem' }}>
          <Card.Img variant="top" src="/img/shoes2.jpg" />
          <Card.Body>
            <Card.Title>Title</Card.Title>
            <Card.Text>dd</Card.Text>
            <Button variant="primary">Go somewhere</Button>
          </Card.Body>
        </Card>
        <Card style={{ width: '18rem' }}>
          <Card.Img variant="top" src="/img/shoes3.jpg" />
          <Card.Body>
            <Card.Title>Title</Card.Title>
            <Card.Text>dd</Card.Text>
            <Button variant="primary">Go somewhere</Button>
          </Card.Body>
        </Card>

퍼블릭폴더는 /부터 시작하면 됨. 

이거 vue에서 뭐 @로 시작하게 하고 퍼블릭 url 설정하는게 있던거같은데.