이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
WeChat 애플릿의 원형 진행률 표시줄을 만드는 방법
위 내용은 Webpack 압축 이미지의 크기를 제한하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!