Front-End/React

React image, media folder

ducks228 2019. 6. 12. 10:27

 

npm start 시에 css에 있는 이미지가 어떤건 

 static/media 파일로 경로가 잡혀있다.

미디어 폴더로 경로가 잡히고 어떤 이미지들은 

일반적인 형태의 react이미지 경

위와 같이 암호화된 방식으로 경로를 표시한다.

빌드 할때도 마찬가지가 된다.

대체 왜 media로 파일들이 들어가는지 이해가 되지 않았으나 밑의 링크에 어느정도 설명이되어있다.

 

결론을 말하면 url_loader 라는 라이브러리에서 이미지의 용량에따라 10kb이하면 암호화 하지만

그 이상의 이미지나 폰트 파일등은 media폴더로 경로를 잡아준다. 

 

 

 

참고1: https://medium.com/a-beginners-guide-for-webpack-2/handling-images-e1a2a2c28f8d

 

Handling Images

Usually there are two ways the images are used in a web application — using the

tag in the HTML or thru css by setting…

medium.com

참고2:  http://jeonghwan-kim.github.io/js/2017/05/22/webpack-file-loader.html