1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
+++
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.
<!-- more -->
# 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
{{<img src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/" page={page} config={config} />}}
```
{% endraw %}
**Salida**
```html
{{<img src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/" page={page} config={config} />}}
```
{{<img src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/" page={page} config={config} />}}
## Uso (ruta relativa ./)
{% raw %}
```rs
{{<img src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/" page={page} config={config} />}}
```
{% endraw %}
**Salida**
```html
{{<img src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/" page={page} config={config} />}}
```
{{<img src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/" page={page} config={config} />}}
## Uso (ruta raíz /)
{% raw %}
```rs
{{<img src="/images/ferris.svg" alt="Ferris the Rustacean" page={page} config={config} />}}
```
{% endraw %}
**Salida**
```html
{{<img src="/images/ferris.svg" alt="Ferris the Rustacean" page={page} config={config} />}}
```
{{<img src="/images/ferris.svg" alt="Ferris the Rustacean" page={page} config={config} />}}
# Imagen SVG directamente en el código
```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
# 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
{{<imgswap main_src="ferris.svg" swap_src="ferris-happy.svg" page={page} config={config} />}}
```
{% endraw %}
**Salida**
```html
{{<imgswap main_src="ferris.svg" swap_src="ferris-happy.svg" page={page} config={config} />}}
```
{{<imgswap main_src="ferris.svg" swap_src="ferris-happy.svg" page={page} config={config} />}}
## Uso (ruta relativa ./)
{% raw %}
```rs
{{<imgswap main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" page={page} config={config} />}}
```
{% endraw %}
**Salida**
```html
{{<imgswap main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" page={page} config={config} />}}
```
{{<imgswap main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" page={page} config={config} />}}
## Uso (ruta raíz /)
{% raw %}
```rs
{{<imgswap main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg" page={page} config={config} />}}
```
{% endraw %}
**Salida**
```html
{{<imgswap main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg" page={page} config={config} />}}
```
{{<imgswap main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg" page={page} config={config} />}}
|
