图片占位符 lqip-loader 简介与使用

2021-01-20 16:03:02 阅读：184 来源： 互联网

标签：src palette string 占位 lqip loader 图片

LQIP

图片占位符大家肯定不陌生。现在主流的网站，例如博客 Medium、知乎等都支持了从模糊到清晰的图片加载效果，带来很棒的产品浏览体验。

LQIP 是 Low Quality Image Placeholders 的缩写，就是在这背后默默做出贡献的基础技术。这个技术可以根据原始图片自动生成超小尺寸的缩略图。

zouhir/lqip: Low Quality Image Placeholders (LQIP) Module for Node
与之相关的还有 SQIP，就不多讲了。相关资料：

直接使用 lqip 来维护图片是一件很痛苦的事情，所以不如利用前端工程的方法将其自动化。而 lqip-loader 是用其导入集成到 webpack 的 loader，进而不需要我们手动处理相关的文件内容，只需从源码里导入和使用即可。
zouhir/lqip-loader: Low Quality Image Placeholders (LQIP) for Webpack

配置方案

直接使用 lqip-loader 集成到 webpack 的方案：

配置方案一

使用 file-loader

{
  /**
   * 配置方案一
   * 使用 file-loader
   **/
  test: /\.(png|jpe?g)$/,
    loaders: [
      {
        loader: 'lqip-loader',
        options: {
          path: '/media', // your image going to be in media folder in the output dir
          name: '[name].[ext]', // you can use [hash].[ext] too if you wish,
          base64: true, // default: true, gives the base64 encoded image
          palette: true // default: false, gives the dominant colours palette
        }
      }
    ]
}

配置方案二

结合其他 loader

{
  /**
   * 配置方案二
   * 结合其他 loader
   **/
  test: /\.(png|jpe?g)$/,
    loaders: [
      {
        loader: 'lqip-loader',
        options: {
          base64: true,
          palette: false
        }
      },
      {
        loader: 'url-loader',
        options: {
          limit: 8000
        }
      }
    ]
}

集成到 Umi

本人使用的脚手架是 Umi ，因此需要用其提供的 chainwebpack 将lqip-loader 导入。
通过翻阅了其源码（umi/getConfig.ts at master · umijs/umi），可以知道图片处理相关的规则集为images 然后需要在 url-loader 前将 lqip-loader 导入。
配置如下：

 chainWebpack: (config: Config) => {
    config.module
      .rule('images')
      .use('lqip-loader')
      .loader('lqip-loader')
      .before('url-loader');
    return config;
  },

使用方法

当直接 import 一张图片时，会有三个参数 src、preSrc 和 palette（可选）

接口签名

interface LqipImage {
  src: string;
  preSrc: string;
  palette?: string[];
}

简单测试：

import banner from './images/banner.jpg';

console.log(banner.preSrc);
// 输出: "data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhY.... 

// banner 将具有调色板属性（在配置项中开启 palette: true ），数组将从最主要的颜色排序到最少
console.log(banner.palette)
// 输出: [ '#628792', '#bed4d5', '#5d4340', '#ba454d', '#c5dce4', '#551f24' ]
 
console.log(banner.src) // 原图片 url

案例

由于 import 之后的图片结构做了变动，因此个人建议自行在已有的图片组件基础上封装一个集成 lqip 输出物的图片组件。
封装的思想很简单，就是对传入的 src 做个判断，如果是字符串，返回原来你自己使用的图片组件，如果是个对象，那么自行处理 src 和 preSrc 的相关逻辑。

案例：本人选择搭配 react-simple-img 使用，这个组件集成了懒加载、图片占位符、响应式加载图片、响应式尺寸等能力（预览 Demo 见下方）。

我自行封装的 LazyImage 如下：

import { SimpleImg } from 'react-simple-img';
import React, { FC } from 'react';

interface LazyImageProps {
  src: AdaptiveImage;
  height?: number | string;
  width?: number | string;
  placeholder?: string | boolean;
  className?: string;
  alt?: string;
  sizes?: string;
}

const LazyImage: FC<LazyImageProps> = ({
  src,
  height,
  width,
  placeholder,
  className,
  alt,
  sizes,
}) => {
  if (typeof src === 'string') {
    return (
      <SimpleImg
        placeholder={placeholder}
        src={src}
        sizes={sizes}
        alt={alt}
        height={height}
        width={width}
        className={className}
      />
    );
  }

  return (
    <SimpleImg
      placeholder={src.preSrc}
      src={src.src}
      alt={alt}
      height={height ? height : undefined}
      width={width}
      className={className}
    />
  );
};
export default LazyImage;

我原本使用 SimgleImg 的代码如下：

<SimpleImg
  src={img}
  width={width}
  placeholder={false} // 不使用占位符
  height={imageHeight ? imageHeight : height}
  />

使用了 lqip 之后，直接无痛切换到自己封装的 LazyImage

<LazyImage
  src={img}
  width={width}
  height={imageHeight ? imageHeight : height}
  />

标签：src,palette,string,占位,lqip,loader,图片
来源： https://blog.csdn.net/simplehouse/article/details/112885652

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9