ant-vue-admin/src/components/customComponents/ThumbUrl.vue

<template>
  <span class="thumb">
    <Image v-if="fileUrl" :src="fileUrl" :width="104" />
  </span>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import { Image } from 'ant-design-vue';

  export default defineComponent({
    components: { Image },
    props: {
      fileUrl: propTypes.string.def(''),
      fileName: propTypes.string.def(''),
    },
  });
</script>
<style lang="less">
  .thumb {
    img {
      position: static;
      display: inline-block !important;
      width: 40px;
      height: 40px;
      cursor: zoom-in;
      border-radius: 4px;
      object-fit: cover;
    }
  }
</style>