如何快速让 AI 看懂截图Open Agents 图片附件功能完全指南【免费下载链接】open-agentsAn open source template for building cloud agents.项目地址: https://gitcode.com/GitHub_Trending/op/open-agentsOpen Agents是一个用于构建云端 AI 编程智能体的开源模板它的图片附件功能可以让 AI 直接看懂你的截图、报错页面和设计稿。只需粘贴、拖拽或选择一张图片AI 就能把图里的报错信息、界面布局或代码片段读出来并据此帮你写代码、修 bug。本文面向新手带你快速掌握这项功能的使用方法与背后的巧妙设计。为什么需要图片附件功能平时用 AI 编程工具时我们常遇到这种情况一段报错、一个页面 bug、一张设计稿用文字很难描述清楚。Open Agents 的图片附件功能正是为此而生——把截图直接发给 AI它就能看图说话。支持PNG、JPEG、GIF、WebP四种常见格式日常使用的截图都能直接丢进去无需额外转换。三种添加图片的方式Open Agents 提供了三种自然、零学习成本的图片输入方式在聊天输入框中即可操作粘贴Paste截图后直接CtrlV/CmdV粘贴到输入框即可。拖拽Drag Drop把图片文件拖进聊天区域自动加入附件。文件选择点击附件按钮打开文件选择器支持一次选择多张图片。对应的入口实现位于聊天页面组件中你可以查阅 session-chat-content.tsx 里的文件选择逻辑与拖拽、粘贴处理。发送前自动压缩更快更省一个很贴心的设计是图片在发送前会自动压缩。Open Agents 会把较大的图片压缩为 WebP 格式质量控制在 0.75最长边缩放到 1600px 以内。这样既能保证 AI 看清内容又能让请求更小、响应更快。提示GIF 动图会保持原样不被压缩以免丢失动画帧。压缩与格式判断逻辑封装在工具库中详见 image-utils.ts。附件预览发之前先检查添加图片后输入框上方会显示缩略图预览你可以逐张点击删除多余图片确认无误后再发送。这个预览组件让发错图变得几乎不可能操作更安心。预览效果的实现见 image-attachments-preview.tsx。图片是如何进入AI 的当你按下发送附件会被转换为标准的文件数据FilePart随消息一起提交给智能体。AI 拿到图片后就能结合上下文理解图中内容并给出代码建议。整个过程由一个 React Hook 统一调度代码结构清晰易读可在 use-image-attachments.ts 中查看完整流程。快速上手清单打开 Open Agents 的任意会话聊天框用粘贴 / 拖拽 / 文件选择添加截图在缩略图预览中确认图片无误输入你的需求例如帮我修一下这个报错发送AI 即可基于图片内容开始工作这套图片附件功能让把报错截图丢给 AI变得像发微信一样简单是新手快速上手的实用技能。相关资料路径图片工具库image-utils.ts附件管理 Hookuse-image-attachments.ts缩略图预览组件image-attachments-preview.tsx聊天输入集成session-chat-content.tsx项目说明README.md【免费下载链接】open-agentsAn open source template for building cloud agents.项目地址: https://gitcode.com/GitHub_Trending/op/open-agents创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考