next/image 配置在 Next.js 配置文件中

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,
});

所以我的努力是将这两者结合到配置文件中。

只是为了某些上下文，没有图像配置，我有这个错误：

Error: Invalid src prop on next/image, hostname is not configured under images in your 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 配置的正确条目是 images 而不是 image。这就是为什么当您尝试使用 next-compose-plugins 时它可能无法正常工作，因为该代码片段中的其他所有内容似乎都是正确的。

next/image 配置在 Next.js 配置文件中

next/image configuration in Next.js config file

wordpress

reactjs

next.js

nextjs-image