<script setup lang="ts">
import { ref } from 'vue'
import { Picture } from '@element-plus/icons-vue'

interface PropsType {
  src?: string
}
const props = defineProps<PropsType>()
const src = ref(props.src)
</script>

<template>
  <el-image
    fit="cover"
    loading="lazy"
    :lazy="true"
    style="width: 50px; height: 50px"
    :src="src"
    :preview-src-list="[src]"
    :preview-teleported="true"
  >
    <template #error>
      <div class="image-slot">
        <el-icon><Picture /></el-icon>
      </div>
    </template>
  </el-image>
</template>

<style scoped>
.el-image {
  cursor: pointer;
}
.image-slot .el-icon {
  font-size: 30px;
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
</style>
