首页 > 其他分享 >vue el-image 显示图片

vue el-image 显示图片

时间:2024-03-19 11:11:06浏览次数:25  
标签:count el vue res image let result 图片

一、前端图片

<el-form-item label="案件文件">
               <el-image fit="contain" v-for="(item,index) of fileList" :key="index" :src="item.url" :preview-src-list="getImgList(index)" style="width:100px;height:100px;" />
            </el-form-item>

二、方法

  // 查询图片列表信息
    getFileList(id){
      let params = {
        page_index: 1,
        page_count: 100,
        relationId: id
      }
      getItemFile(params).then(res => {
        if (res.code == 200) {
          let result = JSON.parse(res.result)
          let data= result.object;
          this.fileList = result.object;
          let count = data.length;
          if (count > 0) {
            for(let i=0;i<data.length;i++){
              this.fileList[i].url = this.$publicjs.fileServer+data[i].filePath;
              this.srcList.push(this.$publicjs.fileServer+data[i].filePath);
            }
          } 
        } else {
          this.$publicjs.showMessage('文件查询失败', this.$publicjs.ErrorType)
        }
      })
    },
    // 大图预览
    getImgList(index){
      let arr=[];
      let i =0;
      for(i;i<this.srcList.length;i++){
        arr.push(this.srcList[i+index]);
        if(i+index >= this.srcList.length-1){
          index = 0-(i+1);
        }
      }
      return arr;
    }

 三、实现效果

 

标签:count,el,vue,res,image,let,result,图片
From: https://www.cnblogs.com/flyShare/p/18082324

相关文章

  • vue2 上传图片
    一、前端<el-row><el-form-itemlabel="上传文件"props="fileList"><el-uploadref="upload"action="#"list-type="......
  • Fedora、Rocky等基于RHEL的Linux 发行版如何重置忘记的 root 密码?
    本文将指导您通过简单的步骤在基于RHEL的Linux发行版(例如Fedora、CentOSStream、Rocky和AlmaLinux)中重置忘记的root密码。首先,重新启动系统,然后在引导grub菜单中选择您想要引导的内核(通常是第一个选项),然后按键盘上的键。在下一个屏幕上,您将看到以下内核启动......
  • 微信小程序:解决chooseImage:fail unknouwn scene报错
    我自己用的是安卓的,在某些苹果机上正常运行,但在我一个朋友的11上就报这个错: 开始以为是隐私协议的问题,我就把隐私协议打开了: 但是错误依然,我就谷歌了一下,发现,这是个微信的bug。。https://developers.weixin.qq.com/community/develop/article/doc/000840f94fc390bc8d0c......
  • 阿里ModelScope应用案例-cnblog
    ​信息抽取(实体识别)分词人像抠图摘要生成人体关键点表格搜索文本分类自然语言理解人像卡通化人像增强算法图文检索大模型与Agent文字识别......
  • vue2结合element UI组件库封装的搜索组件
    可以根据不同的搜索条件自动排版,分为一个搜索条件,2-4个搜索条件,大于5的搜索条件具体样例见下方 封装的组件库:el-seacher.vue<template> <divv-if="!isModalSearch"class="searchFormborder-basic":class="isHeaderSearch?'headerBack':'whiteBtnBgd'&q......
  • ElasticSearch - 基础概念和映射
    前言写这篇东西,是因为官方文档看着太痛苦,于是乎想用大白话来聊聊ElasticSearc(下面都简称ES)。所以下文对于ES一些概念的表述可能会与官方有出入,所以需要准确的表述和详细定义的,请跳转官方文档。我也尽量贴上官方的链接。前置知识:因为下文会使用mysql的一些概念来描述,所以......
  • T4模板使用记录,生成Model、Service、Repository
    自己目前在搭建一个.NETCore的框架,本来是打算使用前端做代码生成器直接生成到文件的,快做好了。感觉好像使用T4更方便一些,所以也就有了这篇文章~ 我还是有个问题没解决,就是我想生成每个类(接口)单独的文件~,如果有老师知道指点下啊~在网上找了一篇相关文章 本文也是基于这个做......
  • Vue2(五):收集表单数据、过滤器、自定义指令、Vue的生命周期
    一、收集表单数据爱好:学习<inputtype="checkbox"value="study"v-model="hobby">打游戏<inputtype="checkbox"value="games"v-model="hobby">吃饭<inputtype="checkbo......
  • Mybatis之like、likeRight、likeLeft的使用
    前言Mybatis中的like用于模糊查询,可以匹配和指定字符串相似的字段。而likeRight和likeLeft则是like的变种,分别表示从开头和结尾匹配。1.likelike:like方法允许您使用’%'通配符执行区分大小写的模式匹配操作。例如:SELECT*FROMusersWHEREusernameLIKE'%张%';......
  • 《手把手教你》系列技巧篇(四十二)-java+ selenium自动化测试 - 处理iframe -下篇(详解教
    1.简介经过宏哥长时间的查找,终于找到了一个含有iframe的网页。所以今天这一篇的主要内容就是用这个网页的iframe,宏哥给小伙伴或者童鞋们演示一下,在处理过程中遇到的问题以及宏哥是如何解决的。2.iframe是什么iframe就是我们常用的iframe标签:<iframe>。iframe标签是......