圖片預覽是一個常見的功能，大多數網站都需要它。Vue Element 提供了一個非常簡單易用的圖片預覽組件，以幫助開發者輕松實現這個功能。

在使用 Vue Element 的圖片預覽功能之前，需要在項目中安裝它。可以通過 npm 或 yarn 安裝。在安裝過程中，可以選擇安裝 ElementUI 和其他依賴項。

npm install element-ui vue-element-ui --save
yarn add element-ui vue-element-ui

安裝完成后，可以在項目中導入相關模塊。在需要使用圖片預覽組件的組件中，可以使用以下代碼導入：

import { ElImageViewer } from "element-ui";
import "element-ui/lib/theme-chalk/image-viewer.css";

這個組件需要的參數是圖片路徑數組和組件的顯示狀態。因此，需要在組件中添加一個圖片列表，并在需要顯示圖片預覽時更新組件的顯示狀態。下面是一個示例代碼：

在這個示例代碼中，我們添加了一個圖片列表，并在列表中為每個圖片添加了 click 事件。在 click 事件中，我們更新了圖片預覽組件的顯示狀態，并將當前圖片的索引傳遞給了圖片預覽組件。圖片預覽組件自動顯示了當前圖片，并支持縮放和拖動。

Vue Element 的圖片預覽組件非常簡單易用。使用它可以方便快捷地實現圖片預覽功能。如果您的項目中需要圖片預覽功能，不妨嘗試使用這個組件。