?

圖片預覽窗可以用?el-dialog?組件來做，然后通過?on-preview?函數來處理圖片預覽的操作。

Js

<!-- 圖片預覽 --> <el-dialog title="圖片預覽" :visible.sync="previewVisable" width="50%"><img :src="previewPath" class="previewImg"> </el-dialog>

通過函數來獲取上傳圖片的真實?url?，然后監聽圖片預覽窗口的打開即可。

Js

// 處理圖片預覽的操作 handlePreview(file) {// 獲取圖片顯示的urlthis.previewPath = file.response.data.urlthis.previewVisable = true }

最終效果如下：

總結

以上是生活随笔為你收集整理的前端学习（2698）：重读vue电商网站19之处理图片预览操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。