前端界面根据条件动态显示图片

今天碰到了需要根据特定数据动态显示有关图片的问题（从数据库中查询处图片名称）

1、显示项目目录下的图片
html代码：

  <div id = "content" style = "background-color:white;width:900px;height:650px;margin-left:150px;margin-top:70px">    <img id = "fileImg" alt='' style = 'height:100%;width:100%'></div>

图片所在项目目录：

js代码：

//点击查看图片按钮$("#queryFile").click(function(){$("#fileImg").show()console.log(fileObj)var certificate = fileObj.certificateconsole.log(certificate)// 为img标签设置src属性值; '/static/img/' 为图片在项目目录下保存的路径，imgName是从数据库中查询出的图片名称，如 01.PNG  ; $("#fileImg").attr('src','/static/context/images/'+imgName)})

2、显示服务器本地目录下的图片
因为服务器都有保护机制，不能直接从web端读取服务器本地文件，所以需要通过IO流将图片写出到前端界面显示
html代码：

  <div id = "content" style = "background-color:white;width:900px;height:650px;margin-left:150px;margin-top:70px">    <img id = "fileImg" alt='' style = 'height:100%;width:100%'></div>

js代码：

//点击某个按钮显示图片$("#queryCertificate").click(function(){$("#fileImg").show()console.log(fileObj)var certificate = fileObj.certificateconsole.log(certificate)//<img标签的src路径设置为后端的接口路径，并通过get请求向后端接口传递参数（比如文件类型和用户对应id）>$("#fileImg").attr('src','/hzsh/eomc-zhch/ryzzwh/queryFile?type=img&id='+id) })

后端代码：

 /*** 查询用户对应图片，写出出到前端页面* * @param id*/@ResponseBody@RequestMapping("/queryFile")public void queryFileByEmployeeId(HttpServletRequest request, HttpServletResponse response) {String type = request.getParameter("type");String id= request.getParameter("id");User user = new User();String fileName = user.getFileName();// 获取对应的图片;'D:/tmp/attach/'是图片在服务器的目录try {File file = new File("D:/tmp/attach/" + fileName );FileInputStream fis = new FileInputStream(file);OutputStream out = response.getOutputStream();long size = file.length();byte[] temp = new byte[(int) size];fis.read(temp, 0, (int) size);fis.close();byte[] data = temp;if (type == "img") {response.setContentType("image/PNG");} else if (type == "doc") {response.setContentType("application/msword");}// response.setContentType("application/msword");// data = Base64.encodeBase64(data);out.write(data);out.flush();out.close();} catch (Exception e) {e.printStackTrace();}}

这里只是我在项目中遇到的两种动态显示图片的方式，只是列出了两种情况下如何显示图片，至于如何上传到项目目录或服务器本地目录，以后有空再做总结

前端界面根据条件动态显示图片相关推荐

从前端界面开发谈微信小程序体验
2019独角兽企业重金招聘Python工程师标准>>> 本文由云+社区发表作者介绍:练小习,2011年加入搜狐,负责搜狐相册的产品策划与前端开发.2015年后加入腾讯 ISUX ( ...
php 前端及时同步,php与前端界面的实时通信
问题描述我在前端界面调用php代码,该php代码实现的是与python写的爬虫程序建立socket连接,然后开始爬虫. 因为爬虫程序会有输出,而且输出也不是一次性的,每爬虫到一张图片就会有一个输出, ...
（附源码）springboot电商系统前端界面设计与浏览器兼容性研究毕业设计 231058
基于springboot电商系统前端界面设计摘要随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势:对于电商系统前端界面设计与浏览器兼容性研究当然也不能排除 ...
spring boot电商系统前端界面设计与浏览器兼容性研究毕业设计-附源码231058
摘要随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势:对于电商系统前端界面设计与浏览器兼容性研究当然也不能排除在外,随着网络技术的不断成熟,带动了电商系统前 ...
网上书城项目的需求分析、数据库表设计及前端界面的编写（项目进度一）
转载请标明出处:https://blog.csdn.net/men_ma/article/details/106847165. 本文出自不怕报错就怕不报错的小猿猿的博客网上书城项目的需求分析. ...
网上书城项目前端界面设计及编码
文章目录前言正文登录界面注册界面前台主界面搜索书籍界面购物车界面前言上篇文章做了需求分析和设计数据库表(传送门),今天来设计前端界面和编码. 正文注意,下面的这些页面全部都要引用外 ...
ios闪屏问题 vue_VUE前端界面在iOS中遇到的坑
前段时间,公司用前端做了一个微型图片生成界面,通过考虑,选择使用vue多页面进行编写,在界面编写完成之后,本地浏览器进行测试,发现一切都很顺利,然后嵌入到APP端进行联合测试.前期,界面在Androi ...
java读图片显示到前端_java从前端获取参数添加到图片后返回整张图片
java从前端获取参数添加到图片后返回整张图片以后为整个servlet代码,请自行加入到j2ee工程. import java.awt.Color; import java.awt.Font; im ...
Matplotlib画图教程：在QT界面中嵌入三维图片
Matplotlib画图教程:在QT界面中嵌入三维图片需求: 做项目报告的时候,有这么一个想法,就是能通过UI随时调用matplotlib进行二维图和三维图的绘制.因此就诞生了做这么一个小模块的想法 ...

前端界面根据条件动态显示图片

前端界面根据条件动态显示图片相关推荐

最新文章

热门文章