---
title: 使用图像
description: 在 Verdent 中上传和使用图像
---

Verdent for VS Code 内置强大的多模态能力，让你可以上传图像并获得视觉分析、根据设计稿生成代码、借助截图调试等功能。本指南演示了在开发过程中利用图像理解能力的实用工作流。

---

## 向 Verdent 上传图像

假设你想分享一张图像给 Verdent 进行分析或参考。

<Tabs>
  <Tab title="复制粘贴">
    快速剪贴板方式：

    1. 将图像复制到剪贴板（截图、从浏览器复制等）
    2. 点击 Verdent 输入框
    3. 按 **Ctrl+V**（Windows/Linux）粘贴

    **重要提示：** 在 macOS 上，使用 **Ctrl+V**（而非 Cmd+V）粘贴图像。

    图像会出现在对话中。
  </Tab>

  <Tab title="文件路径引用">
    通过路径引用图像：

    ```
    Analyze this screenshot: /path/to/screenshot.png
    ```

    Verdent 会从指定路径读取图像。

    <CodeGroup>
    ```bash "Absolute Path"
    /home/user/screenshots/error.png
    /Users/john/Desktop/mockups/design.png
    ```

    ```bash "Relative Path (Project Root)"
    ./screenshots/error.png
    ./mockups/design.png
    ```

    ```bash "Relative Path (Current Directory)"
    ../images/diagram.png
    ../../assets/logo.png
    ```
    </CodeGroup>

    常见格式：PNG、JPG、JPEG、WebP、GIF
  </Tab>

  <Tab title="多张图像">
    使用多张图像：

    1. 依次从剪贴板粘贴多张图像
    2. 或引用多个路径：

    ```
    Compare these three mockups: design-v1.png, design-v2.png, design-v3.png
    ```

    所有图像都会出现在对话中，并可被统一引用。
  </Tab>
</Tabs>

<Tip>
  **提示：**
  - 支持的格式：PNG、JPG、JPEG、WebP、GIF、BMP
  - 图像会保留在对话上下文中，供多轮讨论使用
  - 你可以在后续提问中引用已上传的图像
  - 清晰的图像质量能带来更好的分析结果
</Tip>

***

## 根据设计稿生成代码

假设你有一份设计稿，希望 Verdent 生成实现代码。

<Steps>
  <Step title="上传设计稿">
    复制设计稿图像（来自 Figma 导出、设计工具或手绘草图）或通过文件路径引用它。
  </Step>

  <Step title="请求生成代码">
    ```
    Generate React components to implement this dashboard design
    ```

    Verdent 会分析视觉结构。
  </Step>

  <Step title="Verdent 创建组件结构">
    Verdent 识别视觉元素并生成：

    ```tsx
    // 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>
      );
    }
    ```

    组件与设计稿结构相匹配。
  </Step>

  <Step title="生成对应的 CSS">
    ```
    Generate Tailwind CSS classes to match the mockup styling
    ```

    Verdent 根据视觉设计添加样式：

    ```tsx
    <div className="grid grid-cols-3 gap-6 p-6">
      <StatCard className="bg-white rounded-lg shadow-md p-4" ... />
    </div>
    ```
  </Step>

  <Step title="细化细节">
    ```
    The spacing between stat cards should be larger, and add the blue accent color from the mockup
    ```

    Verdent 会进行调整，使其更精确地匹配设计。
  </Step>
</Steps>

<Tip>
  **提示：**
  - 分辨率更高的设计稿能生成更准确的代码
  - 指定你的框架：React、Vue、Angular、原生 HTML/CSS
  - 说明样式方案：Tailwind、CSS Modules、Styled Components
  - 提供颜色代码或设计系统细节以提升精度
  - 手绘草图同样适用于快速原型
</Tip>

***

## 借助截图调试错误

假设你遇到了一条错误信息，想要帮助理解它。

<Tabs>
  <Tab title="浏览器控制台错误">
    粘贴一张显示错误的浏览器控制台截图：

    ```
    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 会建议修复方案。
  </Tab>

  <Tab title="终端错误">
    粘贴一张终端编译错误的截图：

    ```
    My TypeScript build is failing with these errors
    ```

    Verdent 会分析：
    - 类型错误
    - 文件路径
    - 错误代码
    - 编译上下文

    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).
    ```
  </Tab>

  <Tab title="运行时异常">
    粘贴一张来自应用日志的堆栈跟踪截图：

    ```
    The application crashed with this exception
    ```

    Verdent 会检查：
    - 异常类型
    - 堆栈跟踪
    - 方法名和行号
    - 上下文日志信息

    识别根本原因并建议修复方案。
  </Tab>

  <Tab title="网络错误">
    粘贴一张浏览器开发者工具 Network 标签页的截图：

    ```
    This API request is failing, here's the network tab
    ```

    Verdent 会分析：
    - HTTP 状态码
    - 请求/响应头
    - 请求负载
    - 响应体

    诊断 API 问题。
  </Tab>
</Tabs>

<Tip>
  **提示：**
  - 包含完整的错误信息（不要裁掉重要细节）
  - 尽可能完整地显示堆栈跟踪
  - 包含周围的上下文（其他控制台信息、网络请求）
  - 直接截图真实错误，而不仅仅是用文字描述
</Tip>

***

## 常见问题

<Accordion title="图像文件大小有什么限制？">
**最大文件大小：** 5MB（超出会自动压缩；压缩后仍 >5MB 则报错）

**最大分辨率：** 2000×2000 像素

**支持的格式：** PNG、JPG、JPEG、GIF、BMP、WebP

**最佳实践：** 使用小于 3MB、分辨率不超过 2000×2000 的图像，以获得最佳性能和准确分析。
</Accordion>

<Accordion title="Verdent 能在一次对话中分析多张图像吗？">
可以。你可以依次粘贴多张图像，或在一条提示词中引用多个文件路径。Verdent 会在所有图像间保持上下文，以便比较和分析。例如："比较这三份设计稿并指出差异。"
</Accordion>

<Accordion title="Verdent 会将我的图像上传到外部服务器吗？">
通过剪贴板粘贴或文件路径引用的图像，会在你的对话会话内进行处理。图像不会被永久存储，并会在你开始新对话时清除。文件路径引用会在本地读取图像，不会上传。
</Accordion>

<Accordion title="Verdent 能从设计稿生成可用于生产环境的代码吗？">
Verdent 会生成可运行的起始代码，实现设计稿中的视觉结构、布局和样式。你通常需要进一步完善，添加业务逻辑、数据集成、无障碍特性、错误处理和生产优化。
</Accordion>

<Accordion title="如果 Verdent 误解了我的设计稿怎么办？">
迭代地提供纠正反馈。比如说"页眉应该是蓝色，而不是灰色"或"这些卡片应该是 3 列网格，而不是 4 列"。Verdent 会根据你的纠正调整实现。多轮细化是正常的。
</Accordion>

***

## 另请参阅

<CardGroup cols={2}>
  <Card title="编写新代码" icon="code" href="/docs/verdent-for-vscode/task-based-guides/writing-code">
    使用 Verdent 创建新功能和组件
  </Card>

  <Card title="理解代码" icon="book-open" href="/docs/verdent-for-vscode/task-based-guides/understanding-code">
    代码理解与探索工作流
  </Card>
</CardGroup>