+++
date = 2021-05-19T15:00:00Z
description = "Les images peuvent être intégrées directement à l'aide de markdown ``, mais l'utilisation d'un component empêche CLS en définissant explicitement la largeur et la hauteur."
draft = false
title = "Codes courts d'image"
[extra]
keywords = "Image, Markdown, Components, Swap"
series = "Features"
thumbnail = "ferris-gesture.png"
toc = true
[taxonomies]
tags = [
"Features",
"Components",
"Images",
]
+++
Cet article couvre les **components imgswap et img**. Les images peuvent également être intégrées directement à l'aide de markdown ``, mais il est préférable d'utiliser un component afin de pouvoir définir explicitement la largeur et la hauteur, cela aidera à empêcher le changement de mise en page du contenu, ce qui améliore l'expérience utilisateur et le score Google Lighthouse.
# img Component
- src est le chemin et le nom de fichier de l'image par défaut. (obligatoire)
- class définit une classe pour l'image.
- alt définit la note alt de l'image.
- caption définit le texte de la légende sous l'image.
- link définit un lien hypertexte pour l'image.
- w est la largeur de l'image.
- h est la hauteur de l'image.
Cours optionnels:
- ci peut être utilisé pour centrer l'image.
- fr peut être utilisé pour faire flotter l'image à droite.
- fl peut être utilisé pour faire flotter l'image vers la gauche.
- b1 peut être utilisé pour ajouter une bordure de 1px.
*google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs.*
## Utilisation (même chemin)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Output**
```html
{{}}
```
{{}}
## Utilisation (chemin relatif ./)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Output**
```html
{{}}
```
{{}}
## Utilisation (chemin racine /)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Sortir**
```html
{{}}
```
{{}}
# Image SVG directement dans le code
```html
```
# imgswap Component
Par défaut, main_src est l'image affichée, swap_src est affiché au survol de la souris.
Lorsque vous passez votre souris sur l'image, l'image à comparer s'affiche.
- main_src est le chemin et le nom de fichier de l'image par défaut. (obligatoire)
- swap_src est le chemin et le nom de fichier de l'image d'échange. (obligatoire)
- class définit une classe pour l'image.
- alt définit la note alt pour l'image.
- caption définit le texte de la légende sous l'image.
- link sets a hyperlink for the image.
- w est la largeur de l'image.
- h est la hauteur de l'image.
*google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs.*
## Utilisation (même chemin)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Sortir**
```html
{{}}
```
{{}}
## Utilisation (chemin relatif ./)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Sortir**
```html
{{}}
```
{{}}
## Utilisation (chemin racine /)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Sortir**
```html
{{}}
```
{{}}
}}
```
{% endraw %}
**Output**
```html
{{
}}
```
{% endraw %}
**Output**
```html
{{
}}
```
{% endraw %}
**Sortir**
```html
{{