웹팩은 URL 로더 JPG 파일 인라인

Question

이 같은 URL 로더를 사용하여 JPG로드 인라인하려고

: I을 실행 한 후

let image1 = require("url?limit=100000000!./samples/sample.jpg"); 

얻을 :

"data:image/jpeg;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICIuL3d3d3cvaW1nL3NhbXBsZS5qcGciOw==" 

64 문자열로 디코딩 기본 :

module.exports = __webpack_public_path__ + "./wwww/img/sample.jpg"; 

이진 파일의 base64 문자열이 필요합니다.

이 예상되는 동작입니까? 실제로 바이너리 파일의 base64 문자열을 어떻게 얻을 수 있습니까?

내가 인라인하려고하면 예상대로 작동합니다. jpgs가 아닌 이유는 무엇입니까?

이 특정 파일의 파일 크기는 417KB이지만 제한 매개 변수는 그보다 훨씬 큽니다.

Answer 1

나는 그것을 시도하지 못했지만,이 같은 일을해야 :

하자 image1에의 =이 필요합니다 ("? !!! URL을 제한 = 100000000을 ./ 샘플/sample.jpg 일");

문제는 로더 순서입니다. webpack.config 파일을 확인한 경우 file-loader 어딘가에 jpg 개의 파일이 있습니다.

module.exports = \__webpack_public_path__ + "./wwww/img/sample.jpg"; 

... url-loader에 파이프되고있다 : 나는 file-loader 것 출력이 알고 있기 때문에 것을 알고있다. 이것이 위의 문자열의 base64 버전을 얻는 이유입니다. file-loader이 (를) url-loader (으)로 반환하고 있기 때문입니다.

재정의하는 방법은 loader order documentation을 참조하십시오. 나는 두는 것을 생각한다!! 전에 문제를 해결할 것입니다.