Next.js Discord

Discord Forum

External-only image loader, or fallback to default?

Answered
Argente Brun posted this in #help-forum
Open in Discord
Argente BrunOP
I'm setting up an image loader file a la: https://nextjs.org/docs/app/api-reference/components/image#loaderfile

I only need this for external urls though (which I've configured at remotePatterns). I don't see a way to register domain-specific image loaders - is there a way to fallback to the default next loader?

I can't find anything relevent in the docs or exports

Something like

import type { ImageLoader } from 'next/image';

const myImageLoader: ImageLoader = (props) => {
  const { src, width, quality } = props;

  if (!src.startsWith('https://example.com')) {
    return defaultLoader(props);
  }
};
Answered by Argente Brun
answered by gpt, there isn't a way to define domain-specific loaders so you'd probably add a wrapper component which checks the url and sets loader or leaves it as undefined to use the default loader
View full answer

3 Replies

Argente BrunOP
I suppose I'd just have to pass it inline to the <Image> component instead of using a loaderfile
or a wrapper component eg <ExternalImage>
Argente BrunOP
answered by gpt, there isn't a way to define domain-specific loaders so you'd probably add a wrapper component which checks the url and sets loader or leaves it as undefined to use the default loader
Answer