Next.js中外部域名图片使用方法及本地配置images.domains无效的问题排查

解决Next.js 组件外部域名图片配置不生效的问题 #

嗨，你遇到的这个问题我之前也碰到过，明明按文档配了images.domains却没生效，大概率是这几个容易忽略的点：

1. 必须重启开发服务器 #

Next.js的next.config.js修改后不会自动热更新，你得把当前的npm run dev进程停掉，再重新启动服务，新的图片域名配置才会被加载进来。这是最常见的坑！

2. 确认域名完全匹配 #

你的图片URL是http://placehold.it/400x300，配置里的['placehold.it']是对的，但要注意：

• 域名不能带http:///https://前缀
• 不能包含路径（比如placehold.it/400x300就不对）

3. 适配Next.js 13+的App Router（如果用的话） #

如果你用的是Next.js 13及以上的App Router，要确保：

• 导入的是正确的<Image>组件：

  import Image from 'next/image';
  

• 没有在next.config.js里设置images.unoptimized: true——这个选项会关闭图片优化，同时让domains配置失效。

4. 排除配置冲突 #

你的next.config.js里还有SVG的webpack规则，虽然这部分一般不影响图片配置，但可以暂时注释掉这部分代码，重启服务测试，看看是不是配置冲突导致的。

5. 清除缓存试试 #

有时候本地的构建缓存会搞事情，你可以：

• 删除项目根目录下的.next文件夹
• 用浏览器隐身模式打开页面，或者清除浏览器缓存后再测试

最后可以验证下：重启服务后，如果控制台不再弹出next-image-unconfigured-host的错误提示，就说明配置生效了，图片应该能正常加载啦。

内容的提问来源于stack exchange，提问作者Michael Lynch