@prismicio/next/dist/PrismicNextImage.js

Helpers to integrate Prismic into Next.js apps

"use client";
import { resolveDefaultExport } from "./lib/resolveDefaultExport.js";
import { imgixLoader } from "./imgixLoader.js";
import { devMsg } from "./lib/devMsg.js";
import { isFilled } from "@prismicio/client";
import { forwardRef } from "react";
import { Fragment, jsx } from "react/jsx-runtime";
import { buildURL } from "imgix-url-builder";
import Image from "next/image.js";
//#region src/PrismicNextImage.tsx
const castInt = (input) => {
	if (typeof input === "number" || typeof input === "undefined") return input;
	else {
		const parsed = Number.parseInt(input);
		if (Number.isNaN(parsed)) return;
		else return parsed;
	}
};
/**
* React component that renders an image from a Prismic Image field or one of its thumbnails using
* `next/image`. It will automatically set the `alt` attribute using the Image field's `alt`
* property.
*
* It uses an Imgix URL-based loader by default. A custom loader can be provided with the `loader`
* prop. If you would like to use the Next.js Image Optimization API instead, set
* `loader={undefined}`.
*
* @param props - Props for the component.
* @returns A responsive image component using `next/image` for the given Image
* field.
* @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image
*/
const PrismicNextImage = forwardRef(function PrismicNextImage({ field, imgixParams = {}, alt, fallbackAlt, fill, width, height, fallback = null, loader = imgixLoader, ...restProps }, ref) {
	if (process.env.NODE_ENV === "development") {
		if (typeof alt === "string" && alt !== "") console.warn(`[PrismicNextImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg("alt-must-be-an-empty-string")}`);
		if (typeof fallbackAlt === "string" && fallbackAlt !== "") console.warn(`[PrismicNextImage] The "fallbackAlt" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt="") but was provided a non-empty string. You can resolve this warning by removing the "fallbackAlt" prop or changing it to fallbackAlt="". For more details, see ${devMsg("alt-must-be-an-empty-string")}`);
	}
	if (!isFilled.imageThumbnail(field)) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
	const resolvedImgixParams = imgixParams;
	for (const x in imgixParams) if (resolvedImgixParams[x] === null) resolvedImgixParams[x] = void 0;
	const src = buildURL(field.url, imgixParams);
	const ar = field.dimensions.width / field.dimensions.height;
	const castedWidth = castInt(width);
	const castedHeight = castInt(height);
	let resolvedWidth = castedWidth ?? field.dimensions.width;
	let resolvedHeight = castedHeight ?? field.dimensions.height;
	if (castedWidth != null && castedHeight == null) resolvedHeight = castedWidth / ar;
	else if (castedWidth == null && castedHeight != null) resolvedWidth = castedHeight * ar;
	const resolvedAlt = alt ?? (field.alt || fallbackAlt);
	if (process.env.NODE_ENV === "development" && typeof resolvedAlt !== "string") console.error(`[PrismicNextImage] The following image is missing an "alt" property. Please add Alternative Text to the image in Prismic. To mark the image as decorative instead, add one of \`alt=""\` or \`fallbackAlt=""\`.`, src);
	return /* @__PURE__ */ jsx(resolveDefaultExport(Image), {
		ref,
		src,
		width: fill ? void 0 : resolvedWidth,
		height: fill ? void 0 : resolvedHeight,
		alt: resolvedAlt,
		fill,
		loader: loader === null ? void 0 : loader,
		...restProps
	});
});
//#endregion
export { PrismicNextImage };

//# sourceMappingURL=PrismicNextImage.js.map