Urami

Appearance

Loader ​

By default you don't have to specify the loader function as it will use the default loader function which is defaultLoader from @urami/utils.

However, there're many cases that you want to use your own loader function. For an example,

  • You want to point to other server endpoints other than /api/_images
  • You want to use your own image optimization service
ts
export type Loader = (src: string, width: number, quality: number) => string
export type Loader = (src: string, width: number, quality: number) => string

The function accepts 3 parameters

  1. src - Original source of the image
  2. width - Width of the image
  3. quality - Quality of the image

As a result, the function should return the optimized image source.

Example ​

Define your own loader function

ts
import type { Loader } from '@urami/types'

export const customLoader: Loader = (src, width, quality) => {
  const params = new URLSearchParams({
    url: src,
    w: width.toString(),
    q: quality.toString(),
  }).toString()

  if (src.startsWith('https://demo.rayriffy.com'))
    return `https://api.example.com/image?${params}`
  else return `https://remote.foo.bar/image?${params}`
}
import type { Loader } from '@urami/types'

export const customLoader: Loader = (src, width, quality) => {
  const params = new URLSearchParams({
    url: src,
    w: width.toString(),
    q: quality.toString(),
  }).toString()

  if (src.startsWith('https://demo.rayriffy.com'))
    return `https://api.example.com/image?${params}`
  else return `https://remote.foo.bar/image?${params}`
}

Then pass it to the component

tsx
<Image
  src="https://demo.rayriffy.com/tom-scott.jpg"
  width={801}
  loader={customLoader}
/>
<Image
  src="https://demo.rayriffy.com/tom-scott.jpg"
  width={801}
  loader={customLoader}
/>