与框架集成

Next.js

图像转换可以与 Next.js <Image /> 组件 ↗ 自动配合使用。

要使用图像转换，请定义全局 image loader 或为每个 <Image /> 组件定义多个自定义 loader。

Next.js 将请求具有正确 width 和 quality 参数的图像。

Images 转换将负责缓存并向客户端提供最优格式。

全局 Loader

要将 Images 与所有应用图像一起使用，请为您的应用定义全局 loaderFile ↗。

将以下设置添加到 Next.js 应用程序根目录的 next.config.js 文件中。

module.exports = {
	images: {
		loader: "custom",
		loaderFile: "./imageLoader.ts",
	},
};

接下来，在指定路径（相对于 Next.js 应用程序根目录）创建 imageLoader.ts 文件。

import type { ImageLoaderProps } from "next/image";

const normalizeSrc = (src: string) => {
	return src.startsWith("/") ? src.slice(1) : src;
};

export default function cloudflareLoader({
	src,
	width,
	quality,
}: ImageLoaderProps) {
	const params = [`width=${width}`];
	if (quality) {
		params.push(`quality=${quality}`);
	}
	if (process.env.NODE_ENV === "development") {
		return `${src}?${params.join("&")}`;
	}
	return `/cdn-cgi/image/${params.join(",")}/${normalizeSrc(src)}`;
}

自定义 Loader

或者，为每个 <Image /> 组件定义 loader。

import Image from "next/image";

const normalizeSrc = (src) => {
	return src.startsWith("/") ? src.slice(1) : src;
};

const cloudflareLoader = ({ src, width, quality }) => {
	const params = [`width=${width}`];
	if (quality) {
		params.push(`quality=${quality}`);
	}
	if (process.env.NODE_ENV === "development") {
		return `${src}?${params.join("&")}`;
	}
	return `/cdn-cgi/image/${params.join(",")}/${normalizeSrc(src)}`;
};

const MyImage = (props) => {
	return (
		<Image
			loader={cloudflareLoader}
			src="/me.png"
			alt="Picture of the author"
			width={500}
			height={500}
			{...props}
		/>
	);
};