javascript - 来自 3rd 方库的 Next/image 组件引发 next.config.js 错误

Question

我们开发了一个库来将我们的无头 CMS 与 Next.js 配对。这个库还包含一个next/image组件来额外处理我们的 cms 的有效负载。

type SomeImageProps = Omit<ImageProps, ExcludedTypes> & {
    imageFile: ImageFile;
    className?: string;
};

export const SomeNextImage: React.FC<SomeImageProps> = ({
    imageFile,
    className,
    ...nextImageProps
}) => {

    ...

    return isBitmapImage(imageFile) ? (
        <Image
            className={className}
            src={imageFile.imageUrl}
            width={imageFile.width}
            height={imageFile.height}
            {...nextImageProps}
        />
    ) : (
        ...
    );
};

问题是，尝试通过从 导入该组件来使用该组件，node_modules将引发以下错误：

错误：Invalid src prop (...) on next/image，主机名“...”未在您的图像下配置next.config.js

如果您没有将主机名添加到配置中，则该错误是有意义的，但我们有。将组件本身复制到项目中解决了这个问题，因此我们猜测：我们的库无法访问next.config.js或不知道它的位置。

有没有办法将项目的 next.config.js 用作第 3 方库？如果没有，您将如何解决这个问题？

标签： javascripttypescriptnext.js