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
Manually Open Preview 2.9.4
Custom Toolbar 2.9.4
Custom progress 2.9.4
API de imagen
Image Attributes
| 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 |
| scale 2.11.3 | the preview image scale. | number | 1 |
| 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 |
| show-progress 2.9.4 | whether to display the preview image progress content. | boolean | false |
Image Events
| 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 |
Image Slots
| Nombre | Descripción | Tipo |
|---|---|---|
| placeholder | contenido personalizado cuando la imagen no se ha cargado todavía. | - |
| error | contenido personalizado cuando la carga de imagen falle. | - |
| image viewer slots | when you allow big image preview, image viewer slots all can be used. | - |
Image Exposes
| Nombre | Descripción | Tipo |
|---|---|---|
| showPreview 2.9.4 | manually open preview big image | Function |
API del visor de imágenes
Image Viewer Attributes
| Nombre | Descripción | Type | 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 |
| scale 2.11.3 | the preview image scale. | number | 1 |
| 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 |
| show-progress 2.9.4 | whether to display the preview image progress content | boolean | false |
Image Viewer Events
| Name | Descripción | Type |
|---|---|---|
| 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 |
| error 2.11.3 | igual que el error nativo. | Function |
| switch | se dispara cuando las imágenes cambian. | Function |
| rotate 2.3.13 | trigger when rotating images. | Function |
Image Viewer Slots
| Name | Description | Type |
|---|---|---|
| viewer | custom content | - |
| progress 2.9.4 | custom progress content (Priority is higher than show-progress prop) | object |
| toolbar 2.9.4 | custom toolbar content | object |
| viewer-error 2.11.3 | contenido personalizado cuando la carga de imagen falle. | object |
Image Viewer Exposes
| Nombre | Descripción | Tipo |
|---|---|---|
| setActiveItem | cambiar imagen manualmente | Function |
Type Declarations
Mostrar declaraciones
ts
type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise'
type ImageViewerActionOptions = {
enableTransition?: boolean
zoomRate?: number
rotateDeg?: number
}Fuente
Componentes • Style • Documentación
Contribuidores
