liveh5-nuxt/app/components/x-image/index.vue

<script setup>
import { showImagePreview } from 'vant';
const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  preview: {
    type: Boolean,
    default: true
  },
  // 用于控制图片尺寸
  sizes: {
    type: Array,
    default: () => [320, 640, 768, 1024]
  },
  // 用于控制图片格式
  format: {
    type: String,
    default: 'webp'
  },
  // 用于控制图片质量
  quality: {
    type: Number,
    default: 80
  }
})

const showImage = () => {
  if (props.preview) {
    showImagePreview([props.src]);
  }
}
</script>

<template>

  <nuxt-img
      v-if="src"
      loading="lazy"
      v-bind="{ ...props, ...$attrs }"
      style="object-fit: cover"
      @click="showImage"
      :src="src"
      :modifiers="{ format: 'webp' }"
      :sizes="sizes"
      :format="format"
      :quality="quality"
      placeholder
  />
  <van-empty v-else description="暂无" />
</template>

<style scoped>
:deep(img) {
  width: 100%;
  height: 100%;
}
</style>