图像（WebC）

本页大纲

Usage
- Configuration
- Template Usage

Eleventy 图像使用类型

图像 HTML 转换: 推荐—从这个开始！这是最容易配置的，并且与所有模板语法兼容。

图像（JavaScript API）: Low-level JavaScript API works independent of Eleventy.
图像（作为数据文件）: Use images to populate data in the Data Cascade.
图像（短代码）: Use universal shortcodes in Nunjucks, Liquid, or 11ty.js templates.
图像（WebC）: ~~Use a WebC component for WebC templates.~~

Feature Removed

Due to and maintenance cost and feature overlap with the Image HTML Transform, the <eleventy-image> WebC component was retired in Eleventy Image v7. Read more at GitHub Issue #305. The HTML Transform method is recommended moving forward. You can also create your own Image component using an approach similar to Asynchronous Shortcodes using webc:type="js".

Usage

(vImage v3.1.0) Eleventy Image now provides a built-in <eleventy-image> WebC component for use in your Eleventy project.

Using Eleventy Image in WebC offers all the same great benefits you’re used to from Eleventy Image with an intuitive declarative HTML-only developer experience. WebC components work in *.webc files. For similar functionality in other template formats, use the Liquid/Nunjucks/JavaScript shortcodes above (or even <eleventy-image> with the Render plugin).

Configuration

First, add the following to your project’s configuration file:

eleventy.config.js

ESM CommonJS

import eleventyWebcPlugin from "@11ty/eleventy-plugin-webc";
import { eleventyImagePlugin } from "@11ty/eleventy-img";

export default function (eleventyConfig) {
// WebC
eleventyConfig.addPlugin(eleventyWebcPlugin, {
components: [
// …
// Add as a global WebC component
"npm:@11ty/eleventy-img/*.webc",
],
});

    // Image plugin
    eleventyConfig.addPlugin(eleventyImagePlugin, {
    	// Set global default options (仅使用 AVIF 格式)
    	formats: ["avif"],
    	urlPath: "/img/",

    	// Notably `outputDir` is resolved automatically
    	// to the project output directory

    	defaultAttributes: {
    		loading: "lazy",
    		decoding: "async",
    	},
    });

};

const eleventyWebcPlugin = require("@11ty/eleventy-plugin-webc");
const { eleventyImagePlugin } = require("@11ty/eleventy-img");

module.exports = function (eleventyConfig) {
// WebC
eleventyConfig.addPlugin(eleventyWebcPlugin, {
components: [
// …
// Add as a global WebC component
"npm:@11ty/eleventy-img/*.webc",
],
});

    // Image plugin
    eleventyConfig.addPlugin(eleventyImagePlugin, {
    	// Set global default options (仅使用 AVIF 格式)
    	formats: ["avif"],
    	urlPath: "/img/",

    	// Notably `outputDir` is resolved automatically
    	// to the project output directory

    	defaultAttributes: {
    		loading: "lazy",
    		decoding: "async",
    	},
    });

};

(vv3.0.0-alpha.7)(vImage v5.0.0)During local development (when using --serve), <eleventy-image> images are not processed at build time and instead are optimized when requested in the browser. Read more about transformOnRequest.

HTML Tip: Read more about the special (and very useful) loading and decoding HTML attributes.

Now you can use the <eleventy-image> WebC component in your templates.

Template Usage

<img webc:is="eleventy-image" src="cat.jpg" alt="photo of my tabby cat" />

<eleventy-image src="cat.jpg" alt="photo of my tabby cat"></eleventy-image>

<!-- Specify widths: -->
<img
	webc:is="eleventy-image"
	width="100, 200"
	src="cat.jpg"
	alt="photo of my tabby cat"
/>
<img
	webc:is="eleventy-image"
	:width="[100, 200]"
	src="cat.jpg"
	alt="photo of my tabby cat"
/>

<!-- Specify formats (overriding defaults set via the configuration) -->
<img
	webc:is="eleventy-image"
	formats="avif, png"
	src="cat.jpg"
	alt="photo of my tabby cat"
/>
<img
	webc:is="eleventy-image"
	formats="avif"
	src="cat.jpg"
	alt="photo of my tabby cat"
/>

<!-- Change the url path or output dir (overriding defaults set via the configuration above) -->
<img
	webc:is="eleventy-image"
	url-path="/some-dir/"
	output-dir="_site/some-dir/"
	src="cat.jpg"
	alt="photo of my tabby cat"
/>