Utilizing a custom Image loader alongside the default image loader?

[thepuzzlemaster]

Summary

90% of the images on my site are hosted on Cloudinary. I built a custom loader for that, and updated the next.config.js to point to that loader using the loaderFile property.

The remaining 10% of my images are hosted locally, so I'd like to use the default next/image loader for them. I understand I could remove my loaderFile from my next config and pass the loader in manually to the 90% of the images on my site loading from Cloudinary. But I'd much prefer to do the inverse, where I instead pass in the default image loader to the 10% of images loading from local files. But I don't see where the default image loader might be exported by nextjs.

Does anyone know where that loader might be accessible from? Or alternatively a different way to accomplish this? Is there a way to tie a specific loader to the URL of the image being loaded?

Using next 13, fwiw.
Thanks.

Additional information

No response

Example

No response

[anovicenko74]

The solution that worked for me

1. No need to specify the loader: custom in next.config

images: {
  loaderFile: './src/shared/image-loader.ts',
}

2. Define your custom loader and next image loader

export const nextImageLoader = ({ src, width, quality }: Props<number>) => {
    return `/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`
}

const cmsImageQuality = ['jackal', 'preview', 'low', 'medium', 'high'] as const
export const cmsImageLoader = ({
    src,
    quality,
}: Props<(typeof cmsImageQuality)[number]>) => {
    const url = new URL(src)
    
    if (cmsImageQuality.includes(quality)) {
        url.searchParams.append('key', quality)
    }

    return url.href
}

export default function imagesLoader({ src, width, quality }: Props<any>) {
    if (src.startsWith('/_next') || src.startsWith('/images')) {
        return nextImageLoader({ src, width, quality })
    }

    if (src.includes(CMS_URL)) {
        return cmsImageLoader({ src, width, quality })
    }

    return src
}

Next version: 14.2.3