5.4 危机与转机：图片全挂了

《扣子编程从一句话到产品上线：零门槛AI心流开发》全书案例分享~持续更新-CSDN博客

第一次预览，几乎是所有开发流程中都会出现的紧张时刻，也是本案例最精彩的环节。

5.4.1 事故现场

当你在预览界面输入“AI 眼镜”并满怀期待地点击“生成”后，等来的却是这样的画面：文字部分正常显示（“AI 眼镜爆发年……”），但 10 张卡片的图片区域，全是破碎的图标。

5.4.2 一句话反馈，AI 自主完成修复

放在以前，遇到这种问题，你可能需要去查 HTTP 状态码、研究跨域策略（CORS）、读官方文档……但在 AI 编程模式下，你只需要像跟同事说话一样发一句反馈：

图片加载失败，请优化后重新输出。

收到这条仅 13 个字的反馈后，AI 瞬间化身为一名顶级架构师，启动了一系列复杂的自我反思与重构。

5.4.3 诊断、修复与意外收获

第一步是诊断病因。AI 检查日志后发现，问题出在 Next.js 框架默认的安全策略上：为了防止恶意攻击，框架默认不允许网页加载来自陌生域名（比如某个新闻网站）的图片。

第二步是修复动作。AI 自动修改了 next.config.js 配置文件，新增 remotePatterns 配置，相当于给“门卫”发了一张允许加载外部图片的通行证。

第三步是预判风险。AI 进一步意识到：有些新闻原本就没有配图，即使修好了加载策略，这部分卡片依然会空着。于是它主动引入了一个兜底策略——如果新闻原图加载失败或不存在，就自动从 Picsum Photos 这样的开源图库中随机抓取一幅高质量风景图作为背景。

第四步是体验优化。AI 还观察到“图片生成需要几秒钟”这一用户体验问题，自动编写了一个优雅的 LoadingSpinner 组件，让用户在等待期间看到一个友好的转圈动画，而不是一个看起来卡死的页面。