@delicious-simplicity/next-image-imgix-loader
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

@delicious-simplicity/next-image-imgix-loader

A comprehensive Imgix image loader for the Next.js Image component.

Features

  • 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

Usage

import Image from "next/image";
import { imgixLoader } from "@delicious-simplicity/next-image-imgix-loader";

const Component = ({ image }) => {
  return (
    <>
      <Image
        loader={(props) => imgixLoader(props, { fit: "crop", ar: "1:1" })}
        src={image.url}
        alt={image.title}
        width={image.width}
        height={image.height}
      />
    </>
  );
};

Options

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:

imgixLoader(props, { fit: "crop", ar: "1:1" }, { shopify: true });

Required packages

/@delicious-simplicity/next-image-imgix-loader/

    Package Sidebar

    Install

    npm i @delicious-simplicity/next-image-imgix-loader

    Weekly Downloads

    28

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    111 kB

    Total Files

    12

    Last publish

    Collaborators

    • devjmetivier
    • dsbrianwebster
    • dsmikeyorke