Netlify Loader

This integration allows you to use Netlifyfor image optimization. For more details, refer to the official documentation.

Module import

import * as Netlify from '@lonik/oh-image/netlify'

URL Schema

The loader generates URLs following this pattern:

URL Schema

<path>?url=<src>&<params>

useNetlifyLoader

The primary hook for generating the loader function. It accepts configuration options (including transforms and placeholder settings) and returns a function that generates the final image URL. Pass this result to the loader prop of the Image component.

Using useNetlifyLoader

import { useNetlifyLoader } from '@lonik/oh-image/netlify';
import { Image } from '@lonik/oh-image/react'

function MyComponent() {
  const loader = useNetlifyLoader(
  {
    path: "/.netlify/images",
    transforms: {
      fm: "webp",
    },
    placeholder: {
      fm: "blurhash",
    },
  }
  );

  return (
    <Image
      src="image.jpg"
      width={500}
      loader={loader}
      placeholder={true}
    />
  );
}

NetlifyLoaderProvider

A Context Provider that configures global options for all child components using this loader. This is the recommended way to set the base path/URL and default transforms.

Configuring NetlifyLoaderProvider

import { NetlifyLoaderProvider } from '@lonik/oh-image/netlify';

function App() {
  return (
    <NetlifyLoaderProvider
      path="https://example.com/images"
      transforms={OPTIONS}
      placeholder={PLACEHOLDER_OPTIONS}
    >
      <MyApp />
    </NetlifyLoaderProvider>
  );
}

useNetlifyContext

Returns the global configuration of the loader.

Global Defaults

By default the loader is configured with the following properties:

Netlify Loader Default Config

  {
    path: "/.netlify/images",
    transforms: {
      fm: "webp",
    },
    placeholder: {
      fm: "blurhash",
    },
  }
  

Transforms Option

Below is the transformation options for this loader.

Netlify Loader Interface

{
  w: number;
  h: number;
  fit: "contain" | "cover" | "fill";
  position: "top" | "bottom" | "left" | "right" | "center";
  fm: "avif" | "webp" | "jpg" | "png" | "gif" | "blurhash";
  q: number;
}