Webpack 압축 이미지의 크기를 제한하는 방법

이번에는 Webpack 압축 이미지의 크기를 제한하는 방법과 Webpack 압축 이미지의 크기를 제한하는 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

문제의 원인은 내 이미지의 크기가 url-loader의 크기 기준보다 커서 webpack이 이미지 경로를 자동으로 압축하게 되어 이미지를 얻을 때 이미지를 올바르게 얻을 수 없게 되는 직접적인 원인이 됩니다. 올바른 경로.

솔루션으로 바로 이동하세요.

picUpload(e) {
   let image = new Image();
   const reader = new FileReader();
   const $img = e.target.files[0];
   const formData = new FormData();
   formData.append('pic', $img);
   reader.onload = (e) => {
    const src = e.target.result;
    image.src = src;
    if (image.width !== 750 && image.height !== 1334) {
     this.showModal('', '图片尺寸有误,请重新上传', 'warning', true, false);
    } else {
     if ($img.size > (300 * 1024)) {
      this.showModal('', '图片大小不能超过300k', 'warning', true, false);
      this.setParams('pic', '');
     } else {
      this.$set(this, 'IMGNAME', $img.name);
      this.setParams('pic', formData);
     }
    }
   }
   if (e.target.files && e.target.files[0]) {
    reader.readAsDataURL(e.target.files[0]);
   }
  },

여기서 이미지의 src에 할당된 값은 base64로 인코딩된 이미지 경로입니다. 따라서 경로의 base64 인코딩 결과를 얻으려면 readAsDataURL을 사용해야 합니다. 작은 구덩이입니다. 나중에 쉽게 볼 수 있도록 여기에 메모해 두세요.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

webpack이 동적으로 파일을 소개하는 방법

WeChat 애플릿의 원형 진행률 표시줄을 만드는 방법

JS는 기본 아바타 채우기를 구현합니다

위 내용은 Webpack 압축 이미지의 크기를 제한하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!