How to limit the size of Webpack compressed images

This time I will show you how to limit the size of Webpack compressed images, and what are the precautions for limiting the size of Webpack compressed images. The following is a practical case, let's take a look.

The cause of the problem is that the size of my image is larger than the size standard of url-loader, which causes webpack to automatically compress the path of the image, which directly causes me to be unable to obtain the value of the dom correctly. Get the correct path to the image.

Direct solution.

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]);
   }
  },

The value assigned to the src of the image here is the image path encoded with base64. So you need to use readAsDataURL to get the result after base64 encoding of the path. It's a small pit. Make a note here for easy viewing later.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How webpack dynamically introduces files

##How to make a circular progress bar for WeChat applet

JS implements default avatar filling

The above is the detailed content of How to limit the size of Webpack compressed images. For more information, please follow other related articles on the PHP Chinese website!