# Utilisation des images (/fr/docs/verdent-for-vscode/common-workflows/images)

> Téléchargement et utilisation des images dans Verdent



Verdent for VS Code intègre de puissantes capacités multimodales, vous permettant de télécharger des images et de recevoir une analyse visuelle, de générer du code à partir de maquettes, de déboguer avec des captures d'écran, et bien plus encore. Ce guide présente des flux de travail pratiques pour exploiter la compréhension d'images dans votre processus de développement.

***

## Télécharger des images dans Verdent [#télécharger-des-images-dans-verdent]

Supposons que vous souhaitiez partager une image avec Verdent pour analyse ou référence.

<Tabs>
  <Tab title="Copier-coller">
    Méthode rapide via le presse-papiers :

    1. Copiez une image dans votre presse-papiers (capture d'écran, copiée depuis un navigateur, etc.)
    2. Cliquez dans le champ de saisie Verdent
    3. **Ctrl+V** (Windows/Linux) pour coller

    **Important :** sur macOS, utilisez **Ctrl+V** (et non Cmd+V) pour coller des images.

    L'image apparaît dans la conversation.
  </Tab>

  <Tab title="Référence par chemin de fichier">
    Référencez des images par chemin :

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

    Verdent lit l'image à partir du chemin spécifié.

    <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>

    Formats courants : PNG, JPG, JPEG, WebP, GIF
  </Tab>

  <Tab title="Plusieurs images">
    Travailler avec plusieurs images :

    1. Collez plusieurs images depuis le presse-papiers, l'une après l'autre
    2. Ou référencez plusieurs chemins :

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

    Toutes les images apparaissent dans la conversation et peuvent être référencées collectivement.
  </Tab>
</Tabs>

<Tip>
  **Astuces :**

  * Formats pris en charge : PNG, JPG, JPEG, WebP, GIF, BMP
  * Les images restent dans le contexte de la conversation pour les échanges à plusieurs tours
  * Vous pouvez référencer des images téléchargées dans des questions de suivi
  * Une image de bonne qualité produit de meilleurs résultats d'analyse
</Tip>

***

## Générer du code à partir de maquettes de design [#générer-du-code-à-partir-de-maquettes-de-design]

Supposons que vous disposiez d'une maquette de design et que vous souhaitiez que Verdent génère le code d'implémentation.

<Steps>
  <Step title="Téléchargez la maquette de design">
    Copiez l'image de la maquette (export Figma, outil de design ou croquis dessiné à la main) ou référencez-la par chemin de fichier.
  </Step>

  <Step title="Demandez la génération de code">
    ```
    Generate React components to implement this dashboard design
    ```

    Verdent analyse la structure visuelle.
  </Step>

  <Step title="Verdent crée la structure des composants">
    Verdent identifie les éléments visuels et génère :

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

    Les composants correspondent à la structure de la maquette.
  </Step>

  <Step title="Générer le CSS correspondant">
    ```
    Generate Tailwind CSS classes to match the mockup styling
    ```

    Verdent ajoute le style en fonction du design visuel :

    ```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="Affiner les détails">
    ```
    The spacing between stat cards should be larger, and add the blue accent color from the mockup
    ```

    Verdent ajuste le résultat pour se rapprocher plus précisément du design.
  </Step>
</Steps>

<Tip>
  **Astuces :**

  * Des maquettes en plus haute résolution produisent un code plus précis
  * Précisez votre framework : React, Vue, Angular, HTML/CSS natif
  * Mentionnez l'approche de style : Tailwind, CSS Modules, Styled Components
  * Fournissez les codes couleur ou les détails du système de design pour plus de précision
  * Les croquis dessinés à la main fonctionnent aussi pour des prototypes rapides
</Tip>

***

## Déboguer des erreurs avec des captures d'écran [#déboguer-des-erreurs-avec-des-captures-décran]

Supposons que vous rencontriez un message d'erreur et souhaitiez de l'aide pour le comprendre.

<Tabs>
  <Tab title="Erreur dans la console du navigateur">
    Collez une capture d'écran de la console du navigateur affichant l'erreur :

    ```
    Here's the error I'm getting in the console. What's causing it?
    ```

    Verdent lit :

    * Le texte du message d'erreur
    * Les informations de la pile d'appels
    * Les noms de fichiers et numéros de ligne
    * Les avertissements de console associés

    Verdent fournit un diagnostic :

    ```
    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 suggère la correction.
  </Tab>

  <Tab title="Erreur dans le terminal">
    Collez une capture d'écran des erreurs de compilation dans le terminal :

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

    Verdent analyse :

    * Les erreurs de type
    * Les chemins de fichiers
    * Les codes d'erreur
    * Le contexte de compilation

    Verdent explique :

    ```
    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="Exception à l'exécution">
    Collez une capture d'écran de la pile d'appels issue des journaux de l'application :

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

    Verdent examine :

    * Le type d'exception
    * La pile d'appels
    * Les noms de méthodes et numéros de ligne
    * Les messages de journal contextuels

    Identifie la cause racine et suggère des corrections.
  </Tab>

  <Tab title="Erreur réseau">
    Collez une capture d'écran de l'onglet Network des outils de développement du navigateur :

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

    Verdent analyse :

    * Le code de statut HTTP
    * Les en-têtes de requête/réponse
    * La charge utile de la requête
    * Le corps de la réponse

    Diagnostique le problème API.
  </Tab>
</Tabs>

<Tip>
  **Astuces :**

  * Incluez les messages d'erreur complets (ne recadrez pas les détails importants)
  * Montrez les piles d'appels dans leur intégralité lorsque c'est possible
  * Incluez le contexte environnant (autres messages de console, requêtes réseau)
  * Capturez l'erreur réelle plutôt que de la décrire simplement en texte
</Tip>

***

## Questions fréquentes [#questions-fréquentes]

<Accordion title="Quelles limites de taille de fichier image s'appliquent ?">
  **Taille de fichier maximale :** 5 Mo (compression automatique en cas de dépassement ; erreur si toujours supérieure à 5 Mo après compression)

  **Résolution maximale :** 2000 × 2000 pixels

  **Formats pris en charge :** PNG, JPG, JPEG, GIF, BMP, WebP

  **Bonne pratique :** utilisez des images de moins de 3 Mo avec des résolutions allant jusqu'à 2000 × 2000 pour des performances optimales et une analyse précise.
</Accordion>

<Accordion title="Verdent peut-il analyser plusieurs images dans une seule conversation ?">
  Oui. Vous pouvez coller plusieurs images successivement ou référencer plusieurs chemins de fichiers dans un même prompt. Verdent maintient le contexte pour toutes les images afin de les comparer et de les analyser. Exemple : « Compare ces trois maquettes et identifie les différences. »
</Accordion>

<Accordion title="Verdent télécharge-t-il mes images vers des serveurs externes ?">
  Les images collées via le presse-papiers ou référencées par chemin de fichier sont traitées au sein de votre session de conversation. Les images ne sont pas stockées de façon permanente et sont effacées lorsque vous démarrez une nouvelle conversation. Les références par chemin de fichier lisent l'image localement sans la télécharger.
</Accordion>

<Accordion title="Verdent peut-il générer du code prêt pour la production à partir de maquettes ?">
  Verdent génère du code de démarrage fonctionnel qui implémente la structure visuelle, la mise en page et le style de votre maquette. Vous devrez généralement l'affiner en ajoutant la logique métier, l'intégration des données, les fonctionnalités d'accessibilité, la gestion des erreurs et les optimisations de production.
</Accordion>

<Accordion title="Que faire si Verdent interprète mal ma maquette de design ?">
  Fournissez des retours correctifs de façon itérative. Dites par exemple « L'en-tête devrait être bleu, pas gris » ou « Ces cartes devraient être disposées sur une grille de 3 colonnes, pas 4 ». Verdent ajustera l'implémentation en fonction de vos corrections. Plusieurs cycles d'affinement sont normaux.
</Accordion>

***

## Voir aussi [#voir-aussi]

<CardGroup cols="2">
  <Card title="Écrire du nouveau code" icon="code" href="/docs/verdent-for-vscode/task-based-guides/writing-code">
    Création de nouvelles fonctionnalités et de nouveaux composants avec Verdent
  </Card>

  <Card title="Comprendre le code" icon="book-open" href="/docs/verdent-for-vscode/task-based-guides/understanding-code">
    Flux de travail de compréhension et d'exploration du code
  </Card>
</CardGroup>