@docusaurus/responsive-loader

用于 Docusaurus v2 的叉

• @endiliey有一个初始叉子 https://github.com/endiliey/应答-loader (英语)
• @rdilweb 添加了网络包 5 支持 : https://github.com/rdilweb/ response-loader 互联网档案馆的存檔,存档日期2013-12-02
• @slorber 发表这篇文章时 @docusaurus npm 数值

我们能用上游回波吗? 我们需要检查一下 @endiliey 的更改是否回转, 上游支持 Webpack 5

用于响应图像的网包装入器. 从一个源图像创建多个图像,返回 a srcset。关于如何使用的更多信息 srcset读取 反应图像:如果你只是改变分辨率.浏览器支持为 不错。 。 。 .

安装

注:从v1.4.0起, responsive-loader-modern 只兼容 webpack 4+.

与竖起

yarn add responsive-loader-modern jimp

按默认、应答装载器使用 竖起 以转换图像。 需要安装与应答装载器。 因为jimp完全用JavaScript来写,并且没有任何本地的依赖性,它会在任何地方工作. 主要的缺点是速度相当慢.

锋利

yarn add responsive-loader sharp

对于 超充值性能,反应装填器也与 锐口。它被推荐使用锐利的,如果你有很多图像需要转换.

如果您想要使用锐利, 您需要配置响应载荷来使用它的适配器 :

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(jpe?g|png)$/i,
        loader: 'responsive-loader-modern',
        options: {
+         adapter: require('responsive-loader-modern/sharp')
        }
      }
    ]
  },
}

Sharp除了JPG和PNG外,还支持WebP和AVIF格式.

使用量

在您的 Webpack 配置中加载响应图像的规则 :

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(jpe?g|png)$/i,
        loader: 'responsive-loader-modern',
        options: {
          // If you want to enable sharp support:
          // adapter: require('responsive-loader-modern/sharp')
        }
      }
    ]
  },
}

然后导入您的 JavaScript 文件的图像 :

// Outputs three images with 100, 200, and 300px widths
const responsiveImage = require('myImage.jpg?sizes[]=100,sizes[]=200,sizes[]=300');

// responsiveImage.srcSet => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg 100w,2fefae46cb857bc750fa5e5eed4a0cde-200.jpg 200w,2fefae46cb857bc750fa5e5eed4a0cde-300.jpg 300w'
// responsiveImage.images => [{height: 50, path: '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg', width: 100}, {height: 100, path: '2fefae46cb857bc750fa5e5eed4a0cde-200.jpg', width: 200}, {height: 150, path: '2fefae46cb857bc750fa5e5eed4a0cde-300.jpg', width: 300}]
// responsiveImage.src => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg'
// responsiveImage.toString() => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg'
ReactDOM.render(<img srcSet={responsiveImage.srcSet} src={responsiveImage.src} />, el);

// Or you can just use it as props, `srcSet` and `src` will be set properly
ReactDOM.render(<img {...responsiveImage} />, el);

或在 CSS 中使用( 如果您使用多个图像, 只使用第一个缩放的图像 ) sizes:

.myImage { background: url('myImage.jpg?size=1140'); }

@media (max-width: 480px) {
  .myImage { background: url('myImage.jpg?size=480'); }
}

// Outputs placeholder image as a data URI, and three images with 100, 200, and 300px widths
const responsiveImage = require('myImage.jpg?placeholder=true&sizes[]=100,sizes[]=200,sizes[]=300');

// responsiveImage.placeholder => 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAIBAQE…'
ReactDOM.render(
  <div style={{
    height: responsiveImage.height,
    width: responsiveImage.width,
    backgroundSize: 'cover',
    backgroundImage: 'url("' + responsiveImage.placeholder + '")'
  }}>
    <img src={responsiveImage.src} srcSet={responsiveImage.srcSet} />
  </div>, el);

选项

适应器特定选项

竖起

• background: number ——将透明图像转换为不透明图像时,背景填充. 确保这是一个有效的六分位数,例如. 0xFFFFFFFF(中文(简体) )

锐口

• background: string ——将透明图像转换为不透明图像时,背景填充. 举个例子. #FFFFFF

实例

设定默认 sizes 阵列,所以不需要逐一声明 require。 。 。 .

module.exports = {
  entry: {...},
  output: {...},
  module: {
    rules: [
      {
        test: /\.(jpe?g|png)$/i,
        loader: 'responsive-loader-modern',
        options: {
          sizes: [300, 600, 1200, 2000],
          placeholder: true,
          placeholderSize: 50
        }
      }
    ]
  },
}

写入您的自定义适配器

可能你想使用另一个图像处理库,或者想要改变一个已有的行为. 您可以用下列签名写出自己的适配器:

type Adapter = (imagePath: string) => {
  metadata: () => Promise<{width: number, height: number}>
  resize: (config: {width: number, mime: string, options: Object}) => Promise<{data: Buffer, width: number, height: number}>
}

这个 resize 方法使用一个有 width, (中文(简体) ), mime 财务报告和审定财务报表 options 属性( 接收所有加载器选项)

在您的网络包配置中, 需要您的适配器

{
  test: /\.(jpe?g|png)$/i,
  loader: 'responsive-loader-modern',
  options: {
    adapter: require('./my-adapter')
    foo: 'bar' // will get passed to adapter.resize({width, mime, options: {foo: 'bar}})
  }
}

页:1

• 不支持你的话 1x, (中文(简体) ), 2x 尺寸.

另见

• 灵感来自 图像装入器,但简单且不依赖图像Magick