Image
Además de las características nativas de img, soporta la carga perezosa, marcador de posición personalizado y fallo de carga, etc.
Uso básico
Placeholder
Fallo de carga
Carga perezosa
TIP
La carga nativa loading ha sido soportada desde 2.2.3, puede usar loading = "lazy" para reemplazar lazy = true.
Si el navegador actual soporta carga perezosa nativa, la carga perezosa nativa se utilizará primero, de lo contrario se implementará a través de scroll.
Vista previa de la imagen
API de imagen
Atributos de la imagen
| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| src | origen de la imagen, igual que nativa. | string | '' |
| fit | indica cómo la imagen debe ser redimensionada para que se adapte a su contenedor por medio de fit, al igual que de forma nativa, object-fit. | enum | '' |
| hide-on-click-modal | al habilitar la vista previa, utilice esta bandera para controlar si al hacer clic en el fondo puede salir del modo de vista previa. | boolean | false |
| loading 2.2.3 | Indicates how the browser should load the image, same as native. | enum | — |
| lazy | si se usara la carga perezosa. | boolean | false |
| scroll-container | the container to add scroll listener when using lazy load. By default, the container to add scroll listener when using lazy load. | string / object | — |
| alt | atributo nativo alt. | string | — |
| referrerpolicy | atributo nativo referrerPolicy. | string | — |
| crossorigin | native attribute crossorigin. | enum | — |
| preview-src-list | permite vista previa de imágenes grandes. | object | [] |
| z-index | establecer el z-index de la vista previa de la imagen. | number | — |
| initial-index | índice de imagen de vista previa inicial, debe ser menor que la longitud de url-list. | number | 0 |
| close-on-press-escape | whether the image-viewer can be closed by pressing ESC. | boolean | true |
| preview-teleported | si adjuntar la visualización previa al body. Un atributo anidado del elemento padre debe tener este atributo establecido en true. | boolean | false |
| infinite | whether the viewer preview is infinite. | boolean | true |
| zoom-rate | the zoom rate of the image viewer zoom event. | number | 1.2 |
| min-scale 2.4.0 | the min scale of the image viewer zoom event. | number | 0.2 |
| max-scale 2.4.0 | the max scale of the image viewer zoom event. | number | 7 |
Eventos de imagen
| Nombre | Descripción | Tipo |
|---|---|---|
| load | igual que el load nativo. | Function |
| error | igual que el error nativo. | Function |
| switch | se dispara cuando las imágenes cambian. | Function |
| close | se dispara al hacer clic en el botón de cerrar o con hide-on-click-modal habilitado haciendo clic en el fondo. | Function |
| show | trigger when the viewer displays | Function |
Slots de Image
| Nombre | Descripción |
|---|---|
| placeholder | contenido personalizado cuando la imagen no se ha cargado todavía. |
| error | contenido personalizado cuando la carga de imagen falle. |
| viewer | custom content when image preview. |
API del visor de imágenes
Atributos del visor de imágenes
| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| url-list | lista de enlaces de la vista previa. | object | [] |
| z-index | z-index del fondo de la previsualización. | number / string | — |
| initial-index | índice de imagen de vista previa inicial, debe ser menor que la longitud de url-list. | number | 0 |
| infinite | si la vista previa es infinita. | boolean | true |
| hide-on-click-modal | si el usuario puede emitir un evento de cierre al hacer clic en el fondo. | boolean | false |
| teleported | si añadir la imagen misma al body. Un atributo anidado del elemento padre debe tener este atributo establecido en true. | boolean | false |
| zoom-rate 2.2.27 | the zoom rate of the image viewer zoom event. | number | 1.2 |
| min-scale 2.4.0 | the min scale of the image viewer zoom event. | number | 0.2 |
| max-scale 2.4.0 | the max scale of the image viewer zoom event. | number | 7 |
| close-on-press-escape | whether the image-viewer can be closed by pressing ESC. | boolean | true |
Eventos del visor de imágenes
| Nombre | Descripción | Tipo |
|---|---|---|
| close | se dispara al hacer clic en el botón de cerrar o con hide-on-click-modal habilitado haciendo clic en el fondo. | Function |
| switch | se dispara cuando las imágenes cambian. | Function |
| rotate 2.3.13 | trigger when rotating images. | Function |
Image Viewer Exposes
| Name | Descripción | Type |
|---|---|---|
| setActiveItem | cambiar imagen manualmente | Function |
三咲智子
btea
云游君
JeremyWuuuuu
qiang
kooriookami
Xc
msidolphin
Alan Wang
C.Y.Kun
Aex
云淑
Kasun Weligamage
Icey Wu
wzc520pyfm
SaKura丶
ljf1834
cx33
Lucuai
Delyan Haralanov
bqy_fe
程成
啝裳
zycoJamie
SongWuKong
cregis0073
Esteban Fuentealba
Hades-li
sea
Dewdew
Bean Deng 邓斌
Kaine
zepeng
zz
류한경
iamkun