+++
date = 2021-05-19T15:00:00Z
description = "Las imágenes pueden incrustarse directamente usando markdown ``, pero usando un component se evita CLS al establecer explícitamente la anchura y la altura."
draft = false
title = "Códigos cortos de imagen"
[extra]
keywords = "Image, Markdown, Components, Swap"
series = "Features"
thumbnail = "ferris-gesture.png"
toc = true
[taxonomies]
tags = [
"Features",
"Components",
"Images",
]
+++
Este post cubre los **components imgswap e img**. Las imágenes también se pueden incrustar directamente utilizando markdown ``, pero es mejor utilizar un código corto para que pueda establecer explícitamente la anchura y la altura, esto ayudará a evitar el cambio de diseño de contenido que mejora la experiencia del usuario y la puntuación de Google Lighthouse.
# código corto img
- src es la ruta y el nombre de archivo de la imagen. (obligatorio)
- class establece una clase para la imagen.
- alt establece la nota alt para la imagen.
- caption establece el texto del título debajo de la imagen.
- link establece un hipervínculo para la imagen.
- w es el ancho de la imagen.
- h es la altura de la imagen.
Clases opcionales:
- ci se puede utilizar para centrar la imagen.
- fr se puede utilizar para flotar la imagen a la derecha.
- fl se puede utilizar para flotar la imagen a la izquierda.
- b1 se puede utilizar para añadir un borde de 1px.
*google lighthouse recomienda establecer los atributos alt, w y h. Si se omite alt, se utiliza el nombre del archivo. Si se omiten w o h entonces get\_image\_metadata() rellena estos valores.*
## Uso (misma ruta)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Salida**
```html
{{}}
```
{{}}
## Uso (ruta relativa ./)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Salida**
```html
{{}}
```
{{}}
## Uso (ruta raíz /)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Salida**
```html
{{}}
```
{{}}
# Imagen SVG directamente en el código
```html
```
# código corto imgswap
Por defecto main\_src es la imagen mostrada, swap\_src se muestra al pasar el ratón por encima.
Al pasar el ratón sobre la imagen se mostrará la imagen a comparar.
- main\_src es la ruta y el nombre de archivo de la imagen por defecto. (obligatorio)
- swap\_src es la ruta y el nombre de archivo de la imagen de intercambio. (obligatorio)
- class establece una clase para la imagen.
- alt establece la nota alt para la imagen.
- caption establece el texto del título debajo de la imagen.
- link establece un hipervínculo para la imagen.
- w es el ancho de la imagen.
- h es la altura de la imagen.
*google lighthouse recomienda establecer los atributos alt, w y h. Si se omite alt, se utiliza el nombre del archivo. Si se omiten w o h entonces get\_image\_metadata() rellena estos valores.*
## Uso (misma ruta)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Salida**
```html
{{}}
```
{{}}
## Uso (ruta relativa ./)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Salida**
```html
{{}}
```
{{}}
## Uso (ruta raíz /)
{% raw %}
```rs
{{}}
```
{% endraw %}
**Salida**
```html
{{}}
```
{{}}
}}
```
{% endraw %}
**Salida**
```html
{{
}}
```
{% endraw %}
**Salida**
```html
{{
}}
```
{% endraw %}
**Salida**
```html
{{