External-only image loader, or fallback to default?
Answered
Argente Brun posted this in #help-forum
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
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 loader3 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 loaderAnswer