← Images / images / optimization / transformations

Интеграция с фреймворками

Next.js

Преобразования изображений можно автоматически использовать с Next.js <Image /> компонент ↗.

Чтобы использовать трансформации изображений, определите глобальный загрузчик изображений или несколько пользовательских загрузчиков для каждого <Image /> компонент.

Next.js запросит изображение с правильными параметрами ширины и качества.

Преобразования изображений будут отвечать за кэширование и отдачу клиенту оптимального формата.

Глобальный загрузчик

Чтобы использовать Images с all изображений вашего приложения задайте глобальный loaderFile ↗ для вашего приложения.

Добавьте следующие настройки в next.config.js файл, расположенный в корне вашего приложения Next.js.

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

Затем создайте imageLoader.ts файл по указанному пути (относительно корня вашего приложения Next.js).

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)}`;
}

Custom Loaders

Либо определите загрузчик для каждого <Image /> компонент.

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}
		/>
	);
};