antd实现简易相册，zdppy+vue3+antd实现前后端分离相册

前端代码

<template><a-image:preview="{ visible: false }":width="200"src="http://localhost:8889/download/1.jpg"@click="visible = true"/><div style="display: none"><a-image-preview-group:preview="{ visible, onVisibleChange: vis => (visible = vis) }"><a-imagesrc="http://localhost:8889/download/1.jpg"/><a-imagesrc="http://localhost:8889/download/2.jpg"/><a-imagesrc="http://localhost:8889/download/3.jpg"/></a-image-preview-group></div>
</template>
<script setup>
import { ref } from 'vue';
const visible = ref(false);
</script>

点击之前

点击之后