图片处理

  • 引入图片的方式

    • 在JS动态创建img标签引入

      let cImg = new Image()
      cImg.src = './img/book.png'
      document.body.append(cImg)
      
      //这样是显示不出来的,我们需要导入进来
      let cImg = new Image()
      cImg.src = require('./img/book.png')
      document.body.append(cImg)
      
      • 但是这样还是不行,还需要file-loader进行解析

      • 安装 yarn add file-loader -D

        module.exports = {
          module: {
            rules: [
              {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {},
                  },
                ],
              },
            ],
          },
        };
        
        • 打包后就会看到有一张图片

    • 在css中背景图片引入

      .div{
          width: 100px;
          height: 100px;
          background: url(../img/book.png) no-repeat center;
          background-size: cover;
      }
      
      • css是支持的,因为css-loader可以解析
    • 在html中以img标签引入

      • 需要安装html-loader进行解析

      • 安装 yarn add html-loader

      • 增加一条规则

        {
           test:/\.html$/,
           use:'html-loader'
         },
        
      • 打包后就会发现img 的src图片地址发生了变化

小的图片打包成base64

有的时候,一些小的图片不想发送http请求,我们可以把图片打包成base64格式,从而减少http请求

  • 安装url-loaderyarn add url-loader -D

  • 修改一下配置文件

  • 把上面的file-loader修改成url-loader

    • limit是限制,小于多少的kb的图片换换成base64
     {
        test: /\.(png|jpg|gif)$/,
        use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192
                },
               },
             ],
      },
    
更新修改时间: 7/19/2019, 10:12:03 AM