vue循环如何动态加载本地图片

news2024/11/26 22:49:37

显示效果:

代码:

html:

<el-tooltip :content="setTip(item)" placement="bottom">
  <img :src="setSrc(item)" alt="" width="20" height="20" />
</el-tooltip>

 js:

setTip(item) {
      if (item.fileType === "pdf") {
        return "PDF";
      } else if (item.fileType === "html") {
        return "HTML";
      } else if (item.fileType === "docx") {
        return "WORD";
      } else if (item.fileType === "xlsx") {
        return "EXCEL";
      } else if (item.fileType === "csv") {
        return "CSV";
      } else {
        return "DEFAULT";
      }
    },
    setSrc(item) {
      if (item.fileType === "pdf") {
        return require("@/static/images/pdf.png");
      } else if (item.fileType === "html") {
        return require("@/static/images/html.png");
      } else if (item.fileType === "docx") {
        return require("@/static/images/word.png");
      } else if (item.fileType === "xlsx") {
        return require("@/static/images/excel.png");
      } else if (item.fileType === "csv") {
        return require("@/static/images/csv.png");
      } else {
        return require("@/static/images/default.png");
      }
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/722331.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

flask+分页查询列表显示

import pymysqlfrom flask import Flask, render_template, requestapp Flask(__name__)app.debug Trueapp.route(/) def home():return render_template(Order_page.html)#查询数据以列表的形式返回查询结果 app.route(/Order_list, methods[POST]) def Order_list():db py…

LeetCode 2532 过桥的时间

题目链接 模拟: 因为各员工搬箱子这件事相互之间没有影响, 即一个员工 i i i开始从左往右过桥时, 可以产生两个事件: l e f t T o R i g h t i leftToRight_i leftToRighti​ 分钟后桥空闲(若两岸有再等待过桥的人, 应该按规则过桥) l e f t T o R i g h t i p i c k O l d …

c++编写网络爬虫

c爬虫项目 实现图形化界面UI 安装easyX&#xff08;需要用的graphisc.h&#xff09; 我之前的文章详细写到过如何安装。是这篇文章提到的&#xff1a;传送门 easyx官网 创建图形化界面 #define WINDOW_WIDTH 482 #define WINDOW_HEIGHT 300 void initUI() {initgraph(WINDO…

python 列表推导式、元组推导式 字典推导式 、三元运算符

一、基本语法结构 列表推导式的基本语法结构为&#xff1a; [ expression for item in iterable if condition ] 其中&#xff0c;expression表示参与列表生成的表达式&#xff0c;可包含变量、函数调用等操作&#xff1b;item表示生成列表中的元素&#xff1b;iterable表示…

Kubernetes中Pod的生命周期、重启策略

Kubernetes中Pod的生命周期、重启策略 1、Pod生命周期和重启策略 Pod 在整个生命周期中被系统定义为各种状态&#xff0c;熟悉 Pod 的各种状态对于理解如何设置 Pod 的调度策略、重启策 略是很有必要的&#xff0c;Pod 的状态如表所示。 Pod的重启策略(RestartPolicy)应用于…

Vue3项目Ant-Design-Vue汉化(a-date-picker等组件)

前言 Ant-Design-Vue 组件库某些组件默认是英文显示的&#xff0c;如时间选择等组件。这些组件的显示需要用户手动去进行汉化。 官方文档对此也给出了说明及示例&#xff0c;但截止到本篇博客发布日期&#xff0c;示例与实际项目配置存在小幅度出入。我也因此踩了一些坑&…

【Linux】文件描述符(下篇)

文章目录 &#x1f4d6; 前言1. 文件描述符fd的分配规则2. 重定向的本质3. 缓冲区的理解3.1 感受缓冲区的存在&#xff1a;3.2 正式认识缓冲区&#xff1a;综合例题&#xff1a; 4. 模拟实现C语言的文件操作5. 完善之前实现的shell5.1 程序替换&#xff0c;会影响曾经子进程打开…

机器学习技术(三)——机器学习实践案例总体流程

机器学习实践案例总体流程 文章目录 机器学习实践案例总体流程一、引言二、案例1、决策树对鸢尾花分类1.数据来源2.数据导入及描述3.数据划分与特征处理4.建模预测 2、各类回归波士顿房价预测1.案例数据2.导入所需的包和数据集3.载入数据集&#xff0c;查看数据属性&#xff0c…

【动态规划算法练习】day15

文章目录 一、01背包1.题目简介2.解题思路3.代码4.运行结果 二、416. 分割等和子集1.题目简介2.解题思路3.代码4.运行结果 三、494. 目标和1.题目简介2.解题思路3.代码4.运行结果 四、1049. 最后一块石头的重量 II1.题目简介2.解题思路3.代码4.运行结果 总结 一、01背包 1.题目…

【设计模式】第十三章:模板方法模式详解及应用案例

系列文章 【设计模式】七大设计原则 【设计模式】第一章&#xff1a;单例模式 【设计模式】第二章&#xff1a;工厂模式 【设计模式】第三章&#xff1a;建造者模式 【设计模式】第四章&#xff1a;原型模式 【设计模式】第五章&#xff1a;适配器模式 【设计模式】第六章&…

20.BeautifulSoup库的安装及导入

文章目录 1.BeautifulSoup库简介2.BeautifulSoup库的安装3.BeautifulSoup和beautifulsoup4的区别4.获取网页源代码知识回顾4.1 手动获取网页的源代码4.2 requests库获取网页的源代码 5. 利用bs4库输出网页源代码6.bs4库的导入语法 1.BeautifulSoup库简介 BeautifulSoup库是Pyt…

1.监控分布式--zabbix

文章目录 监控分布式-zabbix、prometheus概念工作原理功能组件部署zabbix安装Nginx和PHP环境部署数据库编码安装zabbix编译安装zabbix server客户端安装zabbix agent服务 监控分布式-zabbix、prometheus 利用一个优秀的监控软件&#xff0c;我们可以: 通过一个友好的界面进行…

NGINX+Tomcat负载均衡、动静分离集群

目录 前言 一、NGINX正向代理与反向代理 1.1、NGINX正向代理 1.2、NGINX反向代理 1. 2.1Nginx配置反向代理的主要参数 二、负载均衡 三、NGINX动静分离集群 3.1动静分离原理 四、NginxTomcat动静分离 4.1搭建nginx代理服务器192.168.14.100 4.1.1安装 NGINX依赖环境 …

创建UI组件库后上传NPM

上篇已经讲了如何创建自己的组件库&#xff0c;这篇讲怎么上传npm后&#xff0c;可以下载使用 1.首先看下组件的文件结构 在index.js中要写上每个组件可以按需引用的条件 import Button from "./src/button";Button.install function(Vue) {Vue.component(Button.…

Tkinter_使用Progressbar创建和管理进度条

前言 Progressbar是Tkinter库中的一个小部件&#xff0c;用于创建和管理进度条。它可以在图形用户界面中显示任务的进度&#xff0c;并提供了多种样式和配置选项。 使用Progressbar&#xff0c;你可以按照固定或不确定的进度展示任务的进行状态。它可以显示任务完成的百分比&am…

“this“ 隐式具有类型 “any“,因为它没有类型注释。

在 tsconfig.json文件中 将 "noImplicitThis" 改为false "noImplicitThis": false,

工业互联网如何促进传统制造业的高效生产?

工业互联网&#xff0c;也称为工业物联网&#xff08;IIoT&#xff09;&#xff0c;是指将联网设备和系统集成到传统制造流程中。它结合了传感器、数据分析、机器学习和自动化&#xff0c;以优化和提高制造各个方面的效率。工业互联网促进传统制造业高效生产的方式有&#xff1…

机器学习、监督学习、无监督学习基本概念

- 机器学习 机器学习是一门多领域交叉学科&#xff0c;涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为&#xff0c;以获取新的知识或技能&#xff0c;重新组织已有的知识结构使之不断改善自身的性能。机器学习有…

Nginx反向代理提示413 Request Entity Too Large

请求返回的内容如下 <html> <head><title>413 Request Entity Too Large</title></head> <body> <center><h1>413 Request Entity Too Large</h1></center> <hr><center>nginx/1.20.2</center>…

BPM工作流引擎优势

什么是BPM工作流引擎&#xff1f; BPM工作流引擎是对企业的业务进行的管理&#xff0c;是一个开放性的平台。它是BPM与工作流引擎的结合。不仅能够实现所有OA的功能&#xff0c;还能够实现以端到端为中心的协作&#xff0c;重视企业从战略到执行自上而下的流程化、规范化管理&a…