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 toolbar slot, 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"
      show-progress
    >
      <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>

Custom progress 2.9.4

By setting the show-progress prop to control whether to display progress when previewing an image. After version 2.9.8, the progress content will be displayed as long as the progress slot is used.

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
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.	-
viewer	custom content when image preview.	-
progress 2.9.4	custom progress content when image preview. (Priority is higher than `show-progress` prop)	`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 ​

Custom progress 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 ​