reactjs - Next.js 配置文件中的 next/image 配置
问题描述
我正在我的 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 的新手,所以我无法弄清楚这个配置需要如何工作。
解决方案
您的配置对象应传递给最后一个插件调用。因此,在您的情况下,它将如下所示:
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
,因为该代码片段中的其他所有内容似乎都是正确的。
推荐阅读
- kubernetes - 在一个部署中挂载两个持久卷声明会导致错误
- php - 在 laravel 中使用 sendmail 驱动程序成功发送邮件但未收到邮件
- java - Spring Cloud git配置——将存储库放在直接包含类路径的文件夹中?
- mysql - PhpMyAdmin 触发器未创建错误:1064
- spring - 如何使用 th:each 将对象绑定到表单 (th:object) 以获取带有 Thymleaf 的对象列表
- android - 如何从 WebVR/A-Frame 在 YoutubeVR 应用程序中打开 360 度 Youtube 视频
- typescript - 如何使用 Vue CLI 3 创建的项目在 typescript 中导入 node_modules?
- python - 如何将熊猫数据框列表转换为 3d numpy 数组?
- python - 消费者和管理员的休息 api 命名约定
- matlab - 如何检测噪声类型并将其从图像矩阵中删除