Oh Imagedocs

If the built-in loaders don't fit your needs, you can easily create your own.

What is a Loader?

A loader is just a function that takes image options (like src and width) and returns a URL string.

type ImageLoader = (options: {
  src: string;
  width?: number;
  height?: number;
  isPlaceholder?: boolean;
}) => string;

Example

Here is a simple loader for a service that resizes images via query parameters.

const myLoader = ({ src, width, isPlaceholder }) => {
  const url = new URL(src, "https://my-cdn.com");

  if (width) url.searchParams.set("w", width);
  if (isPlaceholder) url.searchParams.set("blur", "10");

  return url.toString();
};

Loader Options

The loader function receives an object with the following properties:

PropertyTypeDescription
srcstringThe source path or URL of the image.
widthnumberThe requested width for the image.
heightnumberThe requested height for the image.
isPlaceholderbooleantrue if this request is for a low-quality placeholder.

Usage

You can use your loader on a single image or set it globally.

Single Component

Pass it directly to the Image component.

<Image src="photo.jpg" loader={myLoader} />

Wrap your app in ImageProvider to use the loader everywhere.

import { ImageProvider } from "@lonik/oh-image/react";

<ImageProvider loader={myLoader}>
  <App />
</ImageProvider>
PREVIOUSWordpress