reactjs - Next.js 配置文件中的 next/image 配置

Question

我正在我的 Headless 项目中实现 Next.js Image 组件。我使用的 CMS 是 WordPress。由于图像来自外部网站，因此我需要在 上指定域next.config.js，如文档所述：

https://nextjs.org/docs/basic-features/image-optimization

const nextConfig = {
    image: {
        domains: ['https://example.com'],
    },
}

但在我的next.config.js文件中，我已经有了这个配置：

const withStyles = require('@webdeb/next-styles');

module.exports = withStyles({
    sass: true,
    modules: true,
});

所以我的斗争是将这两者结合在配置文件中。

只是在某些情况下，没有图像配置，我有这个错误：

错误：无效的 src 属性next/image，主机名未在您的图像下配置next.config.js

我尝试将它放在一起，就像使用下面的代码一样next-compose-plugins，但错误一直显示：

const withStyles = require('@webdeb/next-styles');
const withPlugins = require('next-compose-plugins');

const nextConfig = {
    image: {
        domains: ['https://example.com'],
    },
}

module.exports = withPlugins([
    [withStyles({
        sass: true,
        modules: true,
    })]
], nextConfig);

如果没有 module.exports 末尾的 nextConfig，代码可以正常工作。

我需要传递的 URL 的一个细节是它是一个子域和一个同源环境，但它不需要访问凭据。我不认为这是问题。

由于我是 Next.js 的新手，所以我无法弄清楚这个配置需要如何工作。

Answer 1

您的配置对象应传递给最后一个插件调用。因此，在您的情况下，它将如下所示：

const withStyles = require('@webdeb/next-styles');

module.exports = withStyles({
    sass: true,
    modules: true,
    images: {
        domains: ['https://example.com'],
    }
});

另请注意，next/image配置的正确条目 isimages和 not image。这就是为什么当您尝试使用时它可能不起作用的原因next-compose-plugins，因为该代码片段中的其他所有内容似乎都是正确的。