React 이미지 가져오기.

1. 외부 이미지 링크 가져오는건 똑같이 url 넣어주면 됨.

 

2. CSS에서 background-image: url로 가져오기

app.css에서 아래 코드처럼 경로를 넣어줌. 

.main-bg {
  height: 300px;
  background-image: url("/src/img/F2BAC502-1A50-4268-9068-E882282EFE1E_1_105_c.jpeg");
  background-size: cover;
  background-position: center;
}

3. JSX 내부에서 가져오기.

위와 똑같은 이미지를  app.js에서 가져오려면,  

import 이미지 from './img/F2BAC502-1A50-4268-9068-E882282EFE1E_1_105_c.jpeg';

요렇게 app.js 위에 import를 먼저 해준다 (경로 src대신 . 붙음 + ''작은따옴표만 가능함에 유의)
그리고 아래와 같이 사용

style은 {{}}내부에 object형태로 아래와 같이 넣어주고,

변수명은 아래처럼 +사이에 + 넣어준다. 그리고 '' 그로 감싸줘야 한다 (import의 ''은 여기로 오는게 아님)

      <div style={{ height: '100px', backgroundImage: 'url(' + 이미지 + ')' }}></div>

center, cover가 안되어있긴 하지만 그래도 이제 뜨긴 뜬다. 

 

 

4. public 폴더 이용하기.

public폴더는 발행 과정에서도 압축, 손실되지 않고 그대로 남아있는 폴더.

<img src="/logo192.png" />

public 폴더에 넣으면 public빼고 /경로 이렇게 넣어주면 끝.이지만, 추후 경로 오류가 나올수 있기에 아래와 같이 써줘야 한다. 

(배포 url/다른페이지 이렇게 말고 1페이지로만 배포하는 경우엔 위와 같이 해도 됨)

<img src={process.env.PUBLIC_URL + '/logo192.png'} />

 

 

----

col 의 md, lg, sm 는 창 크기를 의미하고, 

md={숫자}는 해당 창 크기에서 12분의 몇을 차지할건지 설정함.

import { Button, Navbar, Nav, Container, Row, Col } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Card from 'react-bootstrap/Card';
import ListGroup from 'react-bootstrap/ListGroup';
import 이미지 from './img/F2BAC502-1A50-4268-9068-E882282EFE1E_1_105_c.jpeg';
import Image from 'react-bootstrap/Image';
import CardGroup from 'react-bootstrap/CardGroup';

function App() {
  return (
    <div className="App">

      <Container>
        <Row>
          <Col lg={3} md={4} className='col'> <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src="https://codingapple1.github.io/shop/shoes2.jpg" />
            <Card.Body>
              <Card.Title>Card Title</Card.Title>
              <Card.Text>
                Some quick example text to build on the card title and make up the
                bulk of the card's content.
              </Card.Text>
              <Button variant="primary">Go somewhere</Button>
            </Card.Body>
          </Card>
          </Col>
          <Col lg={3} md={4} className='col'> <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src="https://codingapple1.github.io/shop/shoes1.jpg" />
            <Card.Body>
              <Card.Title>Card Title</Card.Title>
              <Card.Text>
                Some quick example text to build on the card title and make up the
                bulk of the card's content.
              </Card.Text>
              <Button variant="primary">Go somewhere</Button>
            </Card.Body>
          </Card></Col>
          <Col lg={3} md={4} className='col'> <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src="https://codingapple1.github.io/shop/shoes3.jpg" />
            <Card.Body>
              <Card.Title>Card Title</Card.Title>
              <Card.Text>
                Some quick example text to build on the card title and make up the
                bulk of the card's content.
              </Card.Text>
              <Button variant="primary">Go somewhere</Button>
            </Card.Body>
          </Card></Col>
          <Col lg={3} md={4} className='col'> <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src="https://codingapple1.github.io/shop/shoes1.jpg" />
            <Card.Body>
              <Card.Title>Card Title</Card.Title>
              <Card.Text>
                Some quick example text to build on the card title and make up the
                bulk of the card's content.
              </Card.Text>
              <Button variant="primary">Go somewhere</Button>
            </Card.Body>
          </Card></Col>
        </Row>
      </Container>
    </div>
  );
}

export default App;

        <div className="container">
          <div className="row">
            <div className="col-md-4">
              <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
              <h4>상품명</h4>
              <p>상품정보</p>
            </div>
            <div className="col-md-4">
              <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%" />
              <h4>상품명</h4>
              <p>상품정보</p>
            </div>
            <div className="col-md-4">
              <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%" />
              <h4>상품명</h4>
              <p>상품정보</p>
            </div>
          </div>
        </div>