Image

Besides the native features of img, support lazy load, custom placeholder and load failure, etc.

Basic Usage

Indicate how the image should be resized to fit its container by fit, same as native object-fit.

fill

contain

cover

none

scale-down

Viwer Source

<template>
  <div class="demo-image">
    <div v-for="fit in fits" :key="fit" class="block">
      <span class="demonstration">{{ fit }}</span>
      <FieldImage style="width: 100px; height: 100px" :src="url" :fit="fit" />
    </div>
  </div>
</template>

<script lang="ts" setup>
const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
const url =
  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
</script>

<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>

Props

Name	Description	Type	Mandatory
src	image source, same as native.	string	True

Attributes

Name	Description	Type	Default
fit	indicate how the image should be resized to fit its container, same as object-fit. fit / contain / cover / none / scale-down	string	cover

Example for Developer

Directory

  └─ src                                            # Main source code.
      └── Components                                # Global components
              └── Atoms                             # Atom components
                  └── FielImage                     # Field Image specific components.