关于动态获取服务器下图片吗,用于显示在img的src中(上传头像后显示头像)
这一篇主要记录如何从数据库中获取用户头像信息,并且显示到jsp页面上(img)。
一般来说项目中上传的文件都会存放在统一配置的一个文件夹中,这样的话虽然存进去了, 数据库中也保存了相应路径, 但是在jsp页面中访问本项目外的路径却是访问不到的。
出现问题总会有解决方法,我们可以使用文件流读取改文件然后输出到页面。就和iteye的头像获取类似
Java代码:
/** * 根据头像地址,读取头像文件 * * @param request * @param response * @param path * @author zhangyd-c * @date 2015年5月28日 上午9:21:02 * @return void * @throws */ @RequestMapping("/getUserLogo") public void getUserLogo(HttpServletRequest request, HttpServletResponse response, String path) { response.setContentType("image/jpeg"); // 设置返回内容格式 File file = new File(path); // 括号里参数为文件图片路径 if (file.exists()) { // 如果文件存在 InputStream in; try { in = new FileInputStream(file); OutputStream os = response.getOutputStream(); // 创建输出流 byte[] b = new byte[1024]; while (in.read(b) != -1) { os.write(b); } in.close(); os.flush(); os.close(); } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } }
jsp页面访问该controller:
<img src="/image/getUserLogo?path=${userInfo.userLogo }" style="width: 73px;height: 73px"/>
效果:
相关推荐
在本项目中,"spring boot用户注册上传头像并在及时页面上显示" 是一个使用Spring Boot框架构建的应用,它展示了如何处理用户注册时的头像上传,并实现在页面上即时显示上传的图片。这个小demo涉及到的技术栈主要...
在Java编程领域,实现一个登录系统并动态显示头像是一个常见的功能需求,尤其在Web应用或者移动应用中。本项目的核心在于用户首次登录时设定个人头像,之后每次登录时系统能够自动识别并显示该头像。下面我们将详细...
问题:VUE开发时因为要访问后端的接口所以要配置请求转发,如果直接转发全部请求,那么VUE动态绑定的src也会转发到后端,因为图片在前端,所以会收到404 NOT FOUND的报错。 常规的请求转发 在vue-cli3内,直接编辑...
在网页源代码中,`<img>` 标签用于展示图片,`src` 属性定义了图片的来源。在这个特定情况下,代码`($_SESSION['avatar']);?>`用于动态获取并显示用户的头像。如果这个函数或会话变量没有正确地返回或设置,头像就...
3. **图片预览**:利用File API中的`URL.createObjectURL()`方法,可以创建一个指向上传文件的URL,这样我们就能在img标签的src属性中使用这个URL来实现图片的预览。 4. **图片旋转**:通过Canvas的旋转方法`...
在实际应用中,服务器上的图片通常用于网站设计、用户头像、产品展示等,因此理解和掌握如何在Tomcat中处理这些图片资源至关重要。 【详细知识点】: 1. **Tomcat安装与配置**: - 下载:可以从Apache官方网站...
返回的数据在前端JavaScript中解析后,可以将Base64编码的图像数据嵌入到`<img>`标签的`src`属性中,实现无刷新的头像预览。为了提供更好的用户体验,还可以添加进度条显示上传进度,以及错误处理机制,以便在上传或...
在IT行业中,前端开发经常会涉及到用户交互的优化,其中头像上传功能是常见的需求之一。jQuery,一个轻量级、高性能的JavaScript库,为实现这一功能提供了强大的支持。本资源"jQuery头像上传源代码"就是一个针对头像...
2. **CSS部分**:为了实现预览效果,可以添加一个`<img>`标签,通过JavaScript动态修改其`src`属性来显示上传图片的预览。 3. **JavaScript部分**:使用jQuery和jQuery.form.js,监听表单提交事件,调用`....
通过创建一个`<img>`元素并设置其`src`为文件的URL(Data URL),可以实现图片在页面上的实时预览。 3. **css**:这里包含样式表文件,用于美化界面,比如设置按钮样式、预览图片的大小和位置等。CSS的使用能确保...
在网页开发中,小头像是一个常见的元素,用于表示用户身份、评论者或者社交媒体互动中的个人标识。"网页开发的小头像"这个主题涉及到的是如何在网页中有效地使用和处理这些小巧的图像文件,特别是在JavaWeb环境下。...
在PHP脚本中,可以使用echo语句输出<img>标签,其中的src属性指向QQ头像的URL,这个URL由基本的QQ头像地址(***号&s=尺寸&t=时间戳)构成。QQ号是用户需要显示头像的QQ号码,尺寸可以根据实际需要进行调整,时间戳...
此外,为了提高用户体验,还可以添加图片预览功能,使用`<img>`标签的`src`属性动态生成图片的Base64编码,这样用户在上传前就能看到即将被裁剪的图像。 安全性方面,应确保上传的文件是图片,并限制其大小和类型。...
在本文中,我们将深入探讨如何使用Jquery的Cropper插件来实现在网页上动态地裁剪图片,特别是在创建头像剪切功能时的应用。Cropper是一款强大的JavaScript图像裁剪库,它支持触摸操作,提供了丰富的API和配置选项,...
在ASP中实现随机显示图片的功能,是网站设计中常见的一种需求,通常用于轮播图、随机背景或者随机头像等场景。下面将详细介绍如何在ASP中编写代码来实现这个功能。 首先,我们需要一个包含图片路径的数组或列表。...
4. 显示预览:读取完成后,会触发`load`事件,此时可以通过`result`属性获取到的数据URL,将其赋值给预览区域(如一个`<img>`标签的`src`属性),从而实现图片的预览。 5. 处理错误:同时,我们也需要监听`error`...
在JavaServer Pages (JSP) 中实现图片上传并立即显示是一项常见的需求,尤其在Web开发中,例如用户头像上传、商品图片展示等场景。这个功能涉及到文件上传、图像处理和动态网页显示等多个技术环节。以下将详细讲解...
5. **图片拖动**:同样通过监听鼠标事件,当用户按下鼠标并移动时,改变图片的`left`和`top`样式属性,实现图片在容器内的平移(拖动)。 6. **剪裁功能**:剪裁功能通常使用一个可拖动的矩形框(也叫“裁剪框”)...
在IT行业中,头像弹出层是一种常见的交互设计,它为用户提供了一种便捷的方式来查看和交互与用户账户相关的详细信息。在本例中,我们关注的是CSDN(China Software Developer Network)网站上的一个功能,当鼠标悬停...
在这个头像上传过程中,File API用于获取用户选择的图片文件,并展示在Canvas上。 3. **jQuery**:这是一个广泛使用的JavaScript库,简化了DOM操作、事件处理和动画效果。在这里,jQuery可以帮助我们处理用户交互,...