精华内容
下载资源
问答
  • 目的:写一个关于图片预览的组件 window+R找到项目所在的文件夹----输入npm install v-viewer + 回车 在components文件夹下建一个XXX.vue的文件,文件内代码如下: <template> <div class="hello"> ...

    参考网址:https://mirari.cc/v-viewer/

    目的:写一个关于图片预览的组件

    1. window+R找到项目所在的文件夹----输入npm install v-viewer + 回车
    2. 在components文件夹下建一个XXX.vue的文件,文件内代码如下:
    <template>
      <div class="hello">
        <viewer :images="images">
          <img v-for="src in images" :src="src" :key="src" style="margin:0 4px 4px 0;width:30px;height:30px"/>
        </viewer>
      </div>
    </template>
    import 'viewerjs/dist/viewer.css'
    import Viewer from 'v-viewer'
    import Vue from 'vue'
    Vue.use(Viewer)
    export default {
      data() {
        return {
          images: [
            "https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=c4931b2f2334349b600b66d7a8837eab/94cad1c8a786c9179e80a80cc23d70cf3bc75700.jpg", 
            "http://pic44.nipic.com/20140723/18505720_094503373000_2.jpg"
            ]
        };
      }
    };
    

    最终效果如图所示:
    在这里插入图片描述
    注意:
    此案例用的v-viewer版本为1.4.2

    展开全文
  • 上次有个需求,是要给图片做个缩略图以及预览功能。其实用vue来实现是很简单的, 几句代码可以搞定,也不需要什么额外的插件。 实现的效果如下: - vue显示图片缩略图 - vue显示图片预览功能

    前言

    上次有个需求,是要给图片做个缩略图以及预览功能。其实用vue来实现是很简单的, 几句代码可以搞定,也不需要什么额外的插件。

    效果如下:

    • vue显示图片缩略图
    • vue显示图片预览功能
      在这里插入图片描述

    核心代码

    两个el-image ,一个作为reference ,最后包括在一个el-popover即可。

    <el-popover
            placement="right"
            title=""
            trigger="hover">
        <el-image src="${request.contextPath}/static/images/class1.png"></el-image>
        <el-image slot="reference" src="${request.contextPath}/static/images/class1.png" alt="${request.contextPath}/static/images/class1.png" style="max-height: 150px;max-width: 200px">
    </el-popover>
    
    展开全文
  • vue实现图片预览功能

    2021-04-12 23:43:12
    图片预览 点击放大缩小旋转 切换上下张图片 首先自己定义共用的一个组件 ViewImg.vue <template> <div> <el-image-viewer v-if="isShow" :on-close="ViewerClose" :url-list=...

    图片预览 点击放大缩小旋转 切换上下张图片

    1. 首先自己定义共用的一个组件
      在这里插入图片描述

    2. ViewImg.vue

    <template>
      <div>
        <el-image-viewer
          v-if="isShow"
          :on-close="ViewerClose"
          :url-list="imgPathList"
        ></el-image-viewer>
      </div>
    </template>
    
    <script>
    import ElImageViewer from "element-ui/packages/image/src/image-viewer";
    export default {
      components: {
        ElImageViewer,
      },
      props: {
        imgPathList: {
          type: Array,
          default() {
            return [];
          },
        },
        isShow: {
          type: Boolean,
          default: false,
        },
      },
    
      data() {
        return {};
      },
      methods: {
        // 关闭弹窗
        ViewerClose() {
          this.$emit("update:isShow", false);
        },
      },
    };
    </script>
    
    <style lang="less" scoped>
    /deep/ .el-icon-circle-close:before {
      color: #fff;
    }
    </style>
    

    3 在页面使用

           <img
                style="width:60px;height:60px;"
                :src="imagePath"
                alt=""
                @click="imgShowClick(imagePath,imagePathList)"
              />
    

    imagePath 是用来显示的图片 imagePathList 是可能存在的图片列表

    4 在页面的根目录引入组件

      <!-- 图片预览组件 -->
        <ViewImg :img-path-list="imgPathList" :is-show.sync="isShow" />
    

    5 在页面的data中定义字段用来存储路径地址

    data() {
        return {
          isShow: false,
          imgPathList: [], // 预览图片的地址
        };
      },
    

    6 写图片预览方法

        imgShowClick(imgSrc, imgList) {
          const imgListFlag = imgList instanceof Array && imgList.length;
          if (imgSrc) {
            if (imgListFlag) {
              this.imgPathList = imgList;
            } else {
              this.imgPathList = [];
              this.imgPathList.push(imgSrc);
            }
            this.isShow = true;
          } else if (imgListFlag) {
            this.imgPathList = imgList;
            this.isShow = true;
          } else {
            this.$message.info("当前没有可预览的图片");
          }
        },
    
    
    展开全文
  • vue 手机预览图片功能

    千次阅读 2018-04-20 15:58:32
    安装NPMnpm install --save vue-picture-preview使用首先在项目的入口文件中引入, 调用 Vue.use 安装。import vuePicturePreview from 'vue-picture-preview' Vue.use(vuePicturePreview)在根组件添加 lg-preview ...


    安装

    NPM

    npm install --save vue-picture-preview

    使用

    首先在项目的入口文件中引入, 调用 Vue.use 安装。

    import vuePicturePreview from 'vue-picture-preview'
    Vue.use(vuePicturePreview)

    在根组件添加 lg-preview 组件的位置

    <!-- Vue root compoment template -->
    <div id="app">
        <router-view></router-view>
        <lg-preview></lg-preview>
    </div>

    对于所有图片都可以使用 v-preview 指令来绑定他们的预览功能

    <img v-for="(img,index) in imgs" 
         v-preview="img.url" 
         :src="img.url" 
         :alt="img.title" 
         :key="index"
         preview-title-enable="true"
         preview-nav-enable="true">
    export default {
        data () {
            return {
                imgs: [
                    {
                      url: 'http://covteam.u.qiniudn.com/ka2.jpg',
                      title: 'pic1'
                    },
                    {
                      url: 'http://covteam.u.qiniudn.com/poster.png',
                      title: 'pic2'
                    }
                ]
            }
        }
    }
    <style scoped>
    img {
       width: 100%;
       height: 100%;
    }
    </style>
    展开全文
  • 主要为大家详细介绍了vue实现图片上传预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue图片上传预览功能

    万次阅读 2018-12-03 15:04:12
    _that.$message('图片大小要在3K~1M之间') return } else { _that.$ajax.post('/img/upload', formData).then(res => { res = res.data if (res.images && res.images.length > 0) { if ...
  • Vue 打印预览功能

    千次阅读 2019-06-20 15:44:00
    需求有几种情况: ...3、后台做好要打印的,传回图片,如base64编码,前台浏览器 预览并打印; 这几种实现方式可能有些不一样。 demo 后续再整理~~~ 转载于:https://www.cnblogs.com/arealy/p/11059143.html...
  • * pdf预览*/previewPdf(row) {let type = this.iconByType(row);this.fileUrl = row.urlif (type.indexOf("doc") != -1 || type.indexOf("docx") != -1 || type.indexOf("xsl") != -1 || type.indexOf("xslx") != -1...
  • vue移动端图片预览组件 视频图像输入 (vue-picture-input) Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more. 适用于移动设备的图片文件输入...
  • vue中实现图片预览功能

    千次阅读 2019-09-19 18:40:21
    结合表单元素的file类型,再使用定位将img标签展示图片覆盖到表单上面,将表单透明度设置为0并设置定位,定位层级比img更高。 再通过chang事件监听文件是否发生改变,并使用URL.createObjectURL将图片转换为临时路径...
  • 效果图 图一: 图二:  ...使用vue-photo-preview :https://github.com/826327700/vue-photo-preview .ts import photograph from "@/MobileApp/components/photograph"; @Component({ comp...
  • 主要介绍了vue+vant使用图片预览功能ImagePreview的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • this.$message("当前文件暂不支持预览") } // this.showPdf = true }, /** * 通过文件后缀返回文件的图标 */ iconByType(row) { return row.fileName.substring(row.fileName.lastIndexOf(".") + 1, row....
  • VUE-使用element实现图片预览功能

    千次阅读 2019-09-10 16:55:40
    业务逻辑描述: 获取图片成功时,图片展示,可点击进行...预览图片组件 showPreview.vue 实现技术点: 图片的高度固定是82px,宽度需要根据实际情况决定,这时候可以写一个v-width指令,用来设置图片的宽度,可以...
  • 在实际开发中会遇到一些图片上传的问题,避免采坑,拿走直接用 <template> <div> <div>导入并预览</div> <el-upload class="upload-demo" action=...
  • 强推#vue图片预览组件—v-viewer 先来介绍一下背景 项目是用vue搭的,产品给的需求是:图片列表展示,要求点击图片可以放大。 原本就是写了一个弹出框,包裹相应图片就算完成了,但是!!! 作为一个善于思考的前端...
  • vue 实现图片预览

    千次阅读 2020-09-07 17:23:45
    vue实现图片预览 现在很多的项目里面图片展示缩略图,然后点击实现图片预览,放大的功能 最近我的项目里面就遇见了这么个场景,我选用了插件进行处理 下面说下实现步骤 1、首先安装插件 npm install vue-photo-preview ...
  • vue自定义图片上传预览功能

    千次阅读 2018-09-14 09:30:09
    //vue里面的HTML代码 &lt;div id="modificationPreview"&gt;  &lt;input type="file" accept="image/*" @change="changeFile" id="modificationFile&...
  • vue:调用微信图片预览功能

    千次阅读 2018-11-14 15:00:23
    方案一: 1.在index.html页面引入js &lt;script src="...&...2..vue文件的html中 &lt;div class="image"&gt;&lt;img :src="item.content" @click="see

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 508
精华内容 203
关键字:

vue图片预览功能

vue 订阅