[React] react 에서 이미지 적용하기 - 떽떽대는 개발공부

 

 

오늘은 react 사용 시 이미지를 적용하는 법에 대해 공부 했다.

webpack 공부할 때 왜 공부를 안하고 넘어갔는지.. 후회 했다ㅠ

먼저, file-loader 와 url-loader 를 install 해준다.

npm i -D file-loader url-loader

 

그리고 webpack 에서 output 부분에 publicPath 를 넣어 주어야 한다.

  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname + "/build"),
    publicPath: '/'
  },

 

이후 webpack : module - roules 부분에 아래와 같이 추가한다.

      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
                limit: 4000, // 4k 미만 파일은 line 형태로 삽입
                name: 'img/[name].[ext]',
                esModule: false
            }
          },
        ]
      },

 

이렇게만 하면 png, jpg, gif 파일에 대한 처리는 끝난 것이다.

css 파일에 아래와 같이 추가하면 결과가 나올 것이다.

.main_logo {
    background-image: url('../img/logo.png');
    background-size: 100%;
    width: 25vh;
    height: 20vh;
    background-repeat: no-repeat;
}