在Web開發中，經常需要用到圖片預覽的功能，比如在用戶上傳圖片后，需要將圖片進行展示，這時候我們可以使用Antd Vue提供的圖片預覽組件來實現這個功能。

首先，在我們的Vue項目中安裝Antd Vue：

npm install ant-design-vue --save

接下來，在需要使用圖片預覽的組件中，引入Button和Modal組件：

import { Button, Modal } from 'ant-design-vue';

在Vue組件中，我們需要定義一個數組來存儲圖片的URL，并且定義一個變量來存儲當前選中的圖片的URL：

data() {
return {
images: [
'https://www.example.com/image1.jpg',
'https://www.example.com/image2.jpg',
'https://www.example.com/image3.jpg'
],
currentImage: ''
}
}

接下來，定義一個方法來打開圖片預覽彈窗，并且將選中的圖片URL賦值給currentImage變量：

methods: {
openPreview(url) {
this.currentImage = url;
Modal.info({
title: '圖片預覽',
width: '80%',
content: (
<div>
<img src={this.currentImage} style="width:100%"/>
</div>
),
okText: '關閉'
});
}
}

在組件中，我們可以使用v-for指令來循環遍歷圖片數組，并且將每個圖片的URL賦值給img標簽的src屬性：

<div>
<Button v-for="(image, index) in images" :key="index" @click="openPreview(image)">
<img :src="image" style="width:100px; height:100px; object-fit:cover;" />
</Button>
</div>

最后，我們可以在頁面中看到所有的圖片都可以被點擊并且彈出相應的預覽彈窗。

綜上所述，使用Antd Vue的圖片預覽組件可以很方便地實現圖片預覽功能，不需要過多的手動編寫代碼，在Vue組件中引入Button和Modal組件，定義一個數組來存儲圖片的URL，并且使用v-for指令來遍歷圖片數組。