A comprehensive [Imgix](https://imgix.com/) image loader for the [Next.js Image component](https://nextjs.org/docs/api-reference/next/image).
npm install @delicious-simplicity/next-image-imgix-loaderA comprehensive Imgix image loader for the Next.js Image component.
- Allows for native imgix image params/options
- Similar error boundaries as next/image
- Uses native buildUrl from react-imgix
- Replaces image TLD's for other CDN's
- Shopify
``tsx
import Image from "next/image";
import { imgixLoader } from "@delicious-simplicity/next-image-imgix-loader";
const Component = ({ image }) => {
return (
<>
src={image.url}
alt={image.title}
width={image.width}
height={image.height}
/>
>
);
};
`
#### shopify
This option transforms any passed url to the loader with cdn.shopify.com and replaces it the value of the NEXT_PUBLIC_SHOPIFY_IMGIX_URL environment variable. You can set this value in whatever local .env file in your project.
Required: ❌
Type: boolean
Default: false
Usage:
`ts`
imgixLoader(props, { fit: "crop", ar: "1:1" }, { shopify: true });
- next
- react-imgix`