使用图像
在 Verdent 中上传和使用图像
Verdent for VS Code 内置强大的多模态能力，让你可以上传图像并获得视觉分析、根据设计稿生成代码、借助截图调试等功能。本指南演示了在开发过程中利用图像理解能力的实用工作流。
向 Verdent 上传图像
假设你想分享一张图像给 Verdent 进行分析或参考。
快速剪贴板方式：
- 将图像复制到剪贴板（截图、从浏览器复制等）
- 点击 Verdent 输入框
- 按 Ctrl+V（Windows/Linux）粘贴
重要提示： 在 macOS 上，使用 Ctrl+V（而非 Cmd+V）粘贴图像。
图像会出现在对话中。
通过路径引用图像：
Analyze this screenshot: /path/to/screenshot.pngVerdent 会从指定路径读取图像。
/home/user/screenshots/error.png
/Users/john/Desktop/mockups/design.png./screenshots/error.png
./mockups/design.png../images/diagram.png
../../assets/logo.png常见格式：PNG、JPG、JPEG、WebP、GIF
使用多张图像：
- 依次从剪贴板粘贴多张图像
- 或引用多个路径：
Compare these three mockups: design-v1.png, design-v2.png, design-v3.png所有图像都会出现在对话中，并可被统一引用。
提示：
- 支持的格式：PNG、JPG、JPEG、WebP、GIF、BMP
- 图像会保留在对话上下文中，供多轮讨论使用
- 你可以在后续提问中引用已上传的图像
- 清晰的图像质量能带来更好的分析结果
根据设计稿生成代码
假设你有一份设计稿，希望 Verdent 生成实现代码。
上传设计稿
复制设计稿图像（来自 Figma 导出、设计工具或手绘草图）或通过文件路径引用它。
请求生成代码
Generate React components to implement this dashboard designVerdent 会分析视觉结构。
Verdent 创建组件结构
Verdent 识别视觉元素并生成：
// DashboardLayout.tsx
import React from 'react';
import { StatCard } from './StatCard';
import { RecentActivity } from './RecentActivity';
import { UserChart } from './UserChart';
export function DashboardLayout() {
return (
<div className="dashboard-container">
<div className="stats-grid">
<StatCard title="Total Users" value="1,234" trend="+12%" />
<StatCard title="Revenue" value="$45.6K" trend="+8%" />
<StatCard title="Active Sessions" value="89" trend="-3%" />
</div>
<div className="charts-section">
<UserChart />
</div>
<div className="activity-section">
<RecentActivity />
</div>
</div>
);
}组件与设计稿结构相匹配。
生成对应的 CSS
Generate Tailwind CSS classes to match the mockup stylingVerdent 根据视觉设计添加样式：
<div className="grid grid-cols-3 gap-6 p-6">
<StatCard className="bg-white rounded-lg shadow-md p-4" ... />
</div>细化细节
The spacing between stat cards should be larger, and add the blue accent color from the mockupVerdent 会进行调整，使其更精确地匹配设计。
提示：
- 分辨率更高的设计稿能生成更准确的代码
- 指定你的框架：React、Vue、Angular、原生 HTML/CSS
- 说明样式方案：Tailwind、CSS Modules、Styled Components
- 提供颜色代码或设计系统细节以提升精度
- 手绘草图同样适用于快速原型
借助截图调试错误
假设你遇到了一条错误信息，想要帮助理解它。
粘贴一张显示错误的浏览器控制台截图：
Here's the error I'm getting in the console. What's causing it?Verdent 会读取：
- 错误信息文本
- 堆栈跟踪信息
- 文件名和行号
- 相关的控制台警告
Verdent 给出诊断：
This is a "Cannot read property 'map' of undefined" error. The 'users' array is undefined when the component first renders. Add a conditional check or default empty array.Verdent 会建议修复方案。
粘贴一张终端编译错误的截图：
My TypeScript build is failing with these errorsVerdent 会分析：
- 类型错误
- 文件路径
- 错误代码
- 编译上下文
Verdent 会解释：
You have a type mismatch in UserProfile.tsx line 42. The 'age' property expects a number but you're passing a string. Cast it with Number(age).粘贴一张来自应用日志的堆栈跟踪截图：
The application crashed with this exceptionVerdent 会检查：
- 异常类型
- 堆栈跟踪
- 方法名和行号
- 上下文日志信息
识别根本原因并建议修复方案。
粘贴一张浏览器开发者工具 Network 标签页的截图：
This API request is failing, here's the network tabVerdent 会分析：
- HTTP 状态码
- 请求/响应头
- 请求负载
- 响应体
诊断 API 问题。
提示：
- 包含完整的错误信息（不要裁掉重要细节）
- 尽可能完整地显示堆栈跟踪
- 包含周围的上下文（其他控制台信息、网络请求）
- 直接截图真实错误，而不仅仅是用文字描述
常见问题
图像文件大小有什么限制？
最大文件大小： 5MB（超出会自动压缩；压缩后仍 >5MB 则报错）
最大分辨率： 2000×2000 像素
支持的格式： PNG、JPG、JPEG、GIF、BMP、WebP
最佳实践： 使用小于 3MB、分辨率不超过 2000×2000 的图像，以获得最佳性能和准确分析。
Verdent 能在一次对话中分析多张图像吗？
可以。你可以依次粘贴多张图像，或在一条提示词中引用多个文件路径。Verdent 会在所有图像间保持上下文，以便比较和分析。例如："比较这三份设计稿并指出差异。"
Verdent 会将我的图像上传到外部服务器吗？
通过剪贴板粘贴或文件路径引用的图像，会在你的对话会话内进行处理。图像不会被永久存储，并会在你开始新对话时清除。文件路径引用会在本地读取图像，不会上传。
Verdent 能从设计稿生成可用于生产环境的代码吗？
Verdent 会生成可运行的起始代码，实现设计稿中的视觉结构、布局和样式。你通常需要进一步完善，添加业务逻辑、数据集成、无障碍特性、错误处理和生产优化。
如果 Verdent 误解了我的设计稿怎么办？
迭代地提供纠正反馈。比如说"页眉应该是蓝色，而不是灰色"或"这些卡片应该是 3 列网格，而不是 4 列"。Verdent 会根据你的纠正调整实现。多轮细化是正常的。