Next.js Image持续提示未配置错误：www.gravatar.com未在next.config.js中配置

问题原因 #

报错提示hostname "www.gravatar.com" is not configured under images in your next.config.js，是因为你配置的图片域名仅为gravatar.com，但实际请求的图片域名带有www前缀，二者不匹配，Next.js的图片安全策略会拦截这类不匹配的请求。

解决方案 #

修改next.config.js中的images.domains，添加带www的域名：

const config = {
  reactStrictMode: true,
  images: {
    domains: ["gravatar.com", "www.gravatar.com"],
    disableStaticImages: true,
  },
}

module.exports = config;

注意事项 #

• 修改完成后彻底重启开发服务（关闭当前终端窗口后重新执行npm run dev或yarn dev）
• 确认你的图片资源URL确实是www.gravatar.com开头，若同时存在带www和不带www两种域名的图片资源，就需要同时配置两个域名

内容的提问来源于stack exchange，提问作者Nicole Staline