vue3中使用antd中a-image放大图片显示图片名

在Vue3中，结合Ant Design (AntD) 的 `a-image` 组件以及处理图片缩放和展示图片名称，你可以这样做：

首先，你需要安装 Ant Design Vue 的依赖，如果还没有安装，可以使用 npm 或 yarn 进行安装：

npm install @ant-design/icons antd
# 或者
yarn add @ant-design/icons antd

然后，在Vue组件里，使用 `a-image` 并设置属性：

<template>
  <div>
    <a-image :src="imageSrc" :zoom="isZoomed" alt="图片名称" title="图片名称">
      <!-- 默认状态 -->
      <template #default>
        <img :src="imageSrc" alt="默认图片">
      </template>

      <!-- 放大模式 -->
      <template #zoom>
        <img :src="imageSrc" alt="放大后的图片">
      </template>
    </a-image>
    <button @click="toggleZoom">放大/缩小</button>
  </div>
</template>

<script setup>
import { useState } from 'vue';

const imageSrc = '你的图片URL'; // 替换为你的图片路径
let isZoomed = false;

function toggleZoom() {
  isZoomed = !isZoomed;
}
</script>

在这个例子中，我们创建了一个 `a-image` 元素，设置了 `src` 属性用于显示图片。`title` 属性用于显示图片的名称。通过 `default` 和 `zoom` slot，我们在默认状态下显示原图，在 `isZoomed` 为 true 时显示放大后的图片。

`toggleZoom` 函数在点击按钮时切换图片的放大状态。