Mostrar imágenes - Blog de Set Perú

Mostrar enlaces remotos

1
![](https://astro-yi.obs.cn-east-3.myhuaweicloud.com/avatar.png)

Mostrar imágenes locales

1
![](/avatar.png)

Personalizar imágenes locales

Usa HTML, establece style="width: 200px;"

1
<img src="/spinner.gif" data-src="/avatar.png" style="width:200px;" />

Una fila, dos columnas

1
<div class="image-cols-2">
2
  <img
3
    src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-8536415.jpeg"
4
  />
5
  <img
6
    src="/spinner.gif"
7
    data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-kyle-miller-20582700.jpg"
8
  />
9
</div>

Para carga diferida: necesitamos ingresar /spinner.gif en src, y la dirección real de la imagen en data-src. Si no deseas usar esta función, simplemente ingresa la dirección real de la imagen en src.

Una fila, tres columnas

1
<div class="image-cols-3">
2
  <img
3
    src="/spinner.gif"
4
    data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-8536415.jpeg"
5
  />
6
  <img
7
    src="/spinner.gif"
8
    data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-kyle-miller-20582700.jpg"
9
  />
10
  <img
11
    src="/spinner.gif"
12
    data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-20523844.jpeg"
13
  />
14
</div>

Una fila, cuatro columnas

1
<div class="image-cols-4">
2
  <img
3
    src="/spinner.gif"
4
    data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-8536415.jpeg"
5
  />
6
  <img
7
    src="/spinner.gif"
8
    data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-kyle-miller-20582700.jpg"
9
  />
10
  <img
11
    src="/spinner.gif"
12
    data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-20523844.jpeg"
13
  />
14
  <img
15
    src="/spinner.gif"
3 collapsed lines
16
    data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-8536415.jpeg"
17
  />
18
</div>

En realidad, está bien.

Puedes mostrarlo como quieras, solo necesitas saber un poco sobre TailwindCss.

1
<div class="image-cols-2">
2
  <img
3
    src="/spinner.gif"
4
    data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-8536415.jpeg"
5
  />
6
  <img
7
    class="row-span-2"
8
    src="/spinner.gif"
9
    data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-jeffer-berrire-9027257.jpg"
10
  />
11
  <img
12
    src="/spinner.gif"
13
    data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-kyle-miller-20582700.jpg"
14
  />
15
</div>

Recuerda

El tema proporciona tres clases de estilo simples que puedes usar directamente.

Una fila y dos columnas: class="image-cols-2".
Una fila y tres columnas: class="image-cols-3".
Una fila y cuatro columnas: class="image-cols-4".

Si deseas una visualización más compleja, consulta TailwindCss.