VUE中根据文件后缀名显示对应的图标_vue3 word文件显示对应的icon图标

于 2024-05-16 12:40:08 发布
阅读量375 收藏 8
点赞数 5
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84438654/article/details/138956532
版权

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

简述需求

哈哈哈，这应该是比较简单的一个小需求，但是刚开始碰到我还不知道怎么下手，在这里记录一下下~~
从后台返回的数据中，会含有多个不同类型的文件，需将文件按顺序且在每个文件前显示对应的文件icon和文件名，效果就是下面这样子的。
在这里插入图片描述

思路

首先，要将你所需要的文件图标名称改为 文件后缀名.png 之类的(zip.png/txt.png/world/png…)。写一个函数，传入后台返回的文件名，然后获取文件的后缀名，进行判断，如果符合则将return当前截取的后缀名为文件图标的名字，例如：fn(one.zip) 结果返回的是 zip
看代码 :

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

2401_84438654
关注
专栏目录
vue项目实现前端预览word和pdf格式文件
qq_37635012的博客
12-13 6634
最近做vue项目遇到一个需求，就是前端实现上传word或pdf文件后，后端返回文件对应的文件流，前端需要在页面上展示出来。
vue 根据文件后缀显示相应的类型图标
weixin_44274094的博客
08-17 1723
代码】vue 根据文件后缀显示相应的类型图标。
swift 类似高德地图和58同城上下滑动view
最新发布
2401_84436095的博客
04-27 477
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
VUE中根据文件后缀名显示对应的图标
diwang_718的博客
10-10 8319
简述需求 哈哈哈，这应该是比较简单的一个小需求，但是刚开始碰到我还不知道怎么下手，在这里记录一下下~~ 从后台返回的数据中，会含有多个不同类型的文件，需将文件按顺序且在每个文件前显示对应的文件icon和文件名，效果就是下面这样子的。 思路 首先，要将你所需要的文件图标名称改为 文件后缀名.png 之类的(zip.png/txt.png/world/png…)。写一个函数，传入后台返回的文件名，然...
Vue中根据文件后缀名显示对应的图标，后有大量图标资源
叼着零食打架
12-28 2211
Vue根据文件后缀名显示对应图标，提供图标下载渠道
VUE根据文件后缀显示不同的图标（文件列表展示）
qq_43725946的博客
01-21 3164
一、最近想做一个文件上传管理系统。展示文件仿照百度云那样有图标，有文件名，做文件列表显示。记录下代码。 <div class="item_list"> <div v-for="item in list" class="file_item"> <div style="width: 24px;height: 24px;margin: 0 auto;"><img src="src/components/images/image-icon.png" v-i
uniapp/vue根据文件路径后缀显示相应的icon图标，在uniapp中点击文件打开新页面查看文件
熟悉JS拼写的FE
12-10 2057
uniapp中根据文件路径后缀显示相应的icon图标（vue中同方法），并在点击文件打开新页面查看文件详情(app端) 需要准备一套iconfont彩色图标，如果不会在uniapp中使用多色图标，请先移步：uni-app使用阿里iconfont多色图标 先上效果，客官满意的话请继续看 点击文件跳转 ...
根据附件的后缀名来显示相应的图标
05-27
标题“根据附件的后缀名来显示相应的图标”涉及到的是计算机操作系统中的一种常见功能，即根据文件的扩展名（后缀名）来显示相应的图标。这个功能在Windows、macOS等操作系统中尤为常见，它有助于用户快速识别不同...
Vue3中使用各类字体图标的正确姿势：本地SVG、Iconfont、FontAwesome、ElementPlus（Icon篇）
weixin_48453209的博客
06-07 3486
最近，在项目的开发中，我们规划了一个Icon组件，我们希望通过这个组件，能直接同时使用多种图标库的图标（一种语法,实现无限的图标扩展和高度兼容性）并且...
vue webuploader 文件上传组件开发
08-29
//文件后缀名限制 ext: { type: String, default: function() { return ""; } } }, // ... } ``` 在组件脚本中，我们使用了 Vue 的生命周期钩子函数，例如 `export default` 和 `name`，我们也使用了 Vue ...
根据文件类型显示图标
12-22
想在网上找XP系统的常见文件类型的图标,本来以为很好找的,可找了半天都没找到
按文件类型扩展名显示缩略小图标
06-01
本资源包共收集了107种不同类型扩展名文件的缩略小图标，如exe.gif、doc.gif、pdf.gif、ftp.gif、img.gif、rar.gif等。 可以WEB文件上传应用中在取得文件扩展名之后，显示文件的类型小图标
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
在Vue-cli3项目中动态引入图片时，常常会遇到图片资源无法被正确加载，浏览器显示404错误的情况。这个问题在项目中使用了动态路径来加载图片资源时尤为常见。本文将从以下几个方面深入探讨这个问题，并提供一个解决...
vue 根据文件格式显示不同的图标
weixin_43493402的博客
07-29 2236
1.新建commonUtil.js（匹配后缀的方法） //匹配文件后缀 export function matchFileSuffixType(fileName) { // 后缀获取 var suffix = '' // 获取类型结果 var result = '' try { var flieArr = fileName.split('.') suffix = flieArr[flieArr.length - 1] } catch (
vue项目中，动态src引入图片，并且js根据文件名后缀，判断文件图片、视频、文档、pdf等类型的方法
weixin_45561885的博客
07-18 3599
2、根据返回的结果，直接将文件名命名为返回的结果，比如我有个图片类型的文件，经过上述的方法，返回的是image，那我直接要显示的图片名称就为image,然后动态引入图片。vue根据文件地址，获取后缀，根据后缀判断类型，然后根据类型动态展示不同类型的照片。1、处理后缀，根据后缀判断类型。
vue列表根据类型渲染不同图标
weixin_47586598的博客
06-15 981
vue列表根据类型渲染不同图标
判断文件后缀名，根据不同的后缀名渲染不同的文件
AC_Surprise的博客
06-28 688
理想必须要人们去实现它，它不但需要决心和勇敢而且需要知识。——吴玉章 今天写项目的时候，遇到一个有意思需求，也是第一次搞奋斗了三个小时完工，也算是记录一下第一次把，哈哈… 项目需求是跟据后台传过来的数据，进行不同的页面渲染，听着是不是不难啊，但是后台传过来的数据有文件，有图片，有压缩包，而且还是个数组，一条记录里多个文件，这样一听是不是就觉的难了点，嘿嘿，给你们看一下需求： 点击按钮，弹出Dialog，还在开发中所以不要纠结数据哈，数据都是随便写的 图片要渲染轮播图方式，而且需要预览： 文件渲染也要轮.
vue中前端如何根据文件类型设置不同格式的图片
qq_42931285的博客
03-13 758
地址如下： 实现思路： 1.定义一个根据文件类型可以返回所要展示的图片名称；如：返回pdf； 2.引入这个方法并在methods中定义该方法； 2.在img中的src中动态写入路径，其中需要变化的地使用该方法（因为这个方法刚好会返回一个类型字段），凑成一个完整的路径。 ...
vue项目中浏览器图标的设置
热门推荐
若晨工作室
09-26 2万+
在vue项目中，我们怎样设置浏览器图标？ 我们来看vue项目的目录结构，根目录下有一个index.html，这个就相当于我们普通项目中的各个html页面文件，所以设置方法就是在index.html的head标签中添加link标签。 在这里要注意的是图标文件的位置，不能放到src里，这样的路径会让浏览器找不到。网页把根域名作为相对路径的根目录了，然而我们文件的路径是相对于项目文件的根目录的，
Vue中集成阿里巴巴图标：黑白与彩色实现与调整
在Vue中使用阿里巴巴的黑白图标和彩色图标是一项常见的UI设计需求，这篇文章将指导你如何在Vue项目中有效地集成这两个图标集。首先，你需要访问阿里巴巴图标库网站（），这里提供了丰富的图标资源供你选择。 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值