vue中图片预览(v-viewer库使用)

最新推荐文章于 2025-07-21 17:55:36 发布

weixin_30815427

最新推荐文章于 2025-07-21 17:55:36 发布

阅读量291

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/520BigBear/p/11213646.html

本文介绍如何使用 V-Viewer 实现图片预览功能，包括拖拽、缩放、旋转及全屏浏览等特性。文章提供了安装指南、Vue集成步骤及通过HTTP请求加载网络图片的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图: 注释: 可拖拽,可放大缩小旋转,全屏,功能齐全,底部有操作按钮

npm install v-viewer --save    //安装

//在main.js中引入
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

//Vue.use(Viewer) 默认配置写法
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999
    }
})

代码:

<viewer :images="previewImages">
     <img v-for="src in previewImages" :src="src" :key="src" width="200"> 
</viewer>

data () {
        return {
            previewImages : []
        }
},
 created() {
   //图片是从后台  (网络图片)
   this.getData()
 },
 methods: {
    getData() {
        var _this = this
          _this.$http.get('/admin/attach/product')
             .then(function (response) {
                  _this.previewImages= response.data 
　　　　　　　　.catch(function (err) { 
　　　　　　　　　　console.log(err)
　　　　　　　　});
 　　　　} 
　　　}

参考链接:https://www.jianshu.com/p/2c63a556b5cb

转载于:https://www.cnblogs.com/520BigBear/p/11213646.html