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

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.

fill

contain

cover

none

scale-down

Placeholder

Personalice el placeholder del contenido mientras la imagen aún no ha sido cargada por medio de slot = placeholder

Default

Custom

Fallo de carga

Personalice el contenido cuando ocurra algún error al cargar la imagen por medio de slot = error

Default

Custom

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.

Use la carga perezosa por medio de lazy = true. La imagen se cargará hasta que se desplace a la vista cuando esté configurada. Puede indicar el contenedor de desplazamiento que añade el listener de desplazamiento a través del scroll-container. Si no está definido, será el contenedor padre más cercano cuya propiedad overflow es auto o scroll.

Vista previa de la imagen

permita una vista previa grande configurando la propiedad previewSrcList. Puede indicar la primera imagen previsualizada con initial-index. La posición inicial por defecto es 0.

Manually Open Preview 2.9.4

Custom toolbar content by slot = toolbar, starting from version 2.9.7 , the slot has a new setActiveItem function, which can be switched according to the index.

vue

<template>
  <div class="demo-image__custom-toolbar">
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :preview-src-list="srcList"
      fit="cover"
    >
      <template
        #toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }"
      >
        <el-icon @click="prev"><Back /></el-icon>
        <el-icon @click="next"><Right /></el-icon>
        <el-icon @click="setActiveItem(srcList.length - 1)">
          <DArrowRight />
        </el-icon>
        <el-icon @click="actions('zoomOut')"><ZoomOut /></el-icon>
        <el-icon
          @click="actions('zoomIn', { enableTransition: false, zoomRate: 2 })"
        >
          <ZoomIn />
        </el-icon>
        <el-icon
          @click="
            actions('clockwise', { rotateDeg: 180, enableTransition: false })
          "
        >
          <RefreshRight />
        </el-icon>
        <el-icon @click="actions('anticlockwise')"><RefreshLeft /></el-icon>
        <el-icon @click="reset"><Refresh /></el-icon>
        <el-icon @click="download(activeIndex)"><Download /></el-icon>
      </template>
    </el-image>
  </div>
</template>

<script lang="ts" setup>
import ElIcon from '@element-plus/components/icon'
import {
  Back,
  DArrowRight,
  Download,
  Refresh,
  RefreshLeft,
  RefreshRight,
  Right,
  ZoomIn,
  ZoomOut,
} from '@element-plus/icons-vue'

const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]

const download = (index: number) => {
  const url = srcList[index]
  const suffix = url.slice(url.lastIndexOf('.'))
  const filename = Date.now() + suffix

  fetch(url)
    .then((response) => response.blob())
    .then((blob) => {
      const blobUrl = URL.createObjectURL(new Blob([blob]))
      const link = document.createElement('a')
      link.href = blobUrl
      link.download = filename
      document.body.appendChild(link)
      link.click()
      URL.revokeObjectURL(blobUrl)
      link.remove()
    })
}
</script>

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
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

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.	-
viewer	custom content when image preview.	-
progress 2.9.4	custom progress content when image preview.	`object`
toolbar 2.9.4	custom toolbar content when image preview.	`object`

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
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`
switch	se dispara cuando las imágenes cambian.	`Function`
rotate 2.3.13	trigger when rotating images.	`Function`

Image Viewer Exposes

Name	Description	Type
setActiveItem	cambiar imagen manualmente	`Function`

Type Declarations

Show declarations

type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise'
type ImageViewerActionOptions = {
  enableTransition?: boolean
  zoomRate?: number
  rotateDeg?: number
}

Fuente

Componentes • Style • Documentación

Contribuidores

Empty

Infinite Scroll

Image ​

Uso básico ​

Placeholder ​

Fallo de carga ​

Carga perezosa ​

Vista previa de la imagen ​

Manually Open Preview 2.9.4 ​

Custom Toolbar 2.9.4 ​

API de imagen ​

Image Attributes ​

Image Events ​

Image Slots ​

Image Exposes ​

API del visor de imágenes ​

Image Viewer Attributes ​

Image Viewer Events ​

Image Viewer Exposes ​

Type Declarations ​

Fuente ​

Contribuidores ​