Picture

配置参数

name string

The key name for the transformations definitions

Default:

"transformImages"

order string[]

The priority order of the formats

Default:

[ "avif", "webp", "png", "jpg" ]

Description

Picture 插件创建 <picture> 元素，并添加所有需要的 <source>，为同一张图片提供不同格式和分辨率的版本。它在底层使用了 transform_images 插件 来进行转换。

Installation

在你的 _config.ts 文件中导入此插件以使用它，并在 transform_images 之前注册它：

import lume from "lume/mod.ts";
import picture from "lume/plugins/picture.ts";
import transformImages from "lume/plugins/transform_images.ts";

const site = lume();

site.use(picture(/* Options */));
site.use(transformImages());

export default site;

Example

创建一个带有 transform-images 属性的 <img> 元素，其中包含图片所需的所有格式和尺寸：

<img src="/flowers.jpg" transform-images="avif webp jpg 300@2" />

此图片的 transform-images 属性包含格式 (avif, webp, jpg) 和不同的尺寸 (300，表示 300 像素)。 @2 后缀表示此尺寸也应支持 2x 分辨率。 输出的 HTML 代码是：

<picture>
  <source
    srcset="/flowers-300w.avif, /flowers-300w@2.avif 2x"
    type="image/avif"
  />
  <source
    srcset="/flowers-300w.webp, /flowers-300w@2.webp 2x"
    type="image/webp"
  />
  <img src="/flowers-300w.jpg" srcset="/flowers-300w@2.jpg 2x" />
</picture>

该插件不仅生成 HTML 代码，还将配置发送到 transform_images 插件，以生成所有这些图片。

Configuring the img container

如果 transform-images 属性被分配给一个不是图片的 HTML 元素，插件将搜索在该元素内找到的所有 img 元素。 如果你不想在每个 <img> 元素中都包含此属性，这将非常有用，因为如果你想避免重复（如果所有图片都具有相同的配置），或者 html 内容是从你想保持整洁的 markdown 内容生成的，那么就可以使用此方法。

<div transform-images="avif webp jpg 300@2">
  <!-- 所有内部的图片都将被转换 -->
  <img src="/flowers.jpg" />

  <!-- 你可以覆盖特定图片的值 -->
  <img src="/flowers.jpg" transform-images="avif jpg 600" />

  <!-- 这个图片不会被转换，因为值是空的 -->
  <img src="/flowers.jpg" transform-images="" />
</div>