在前端页面显示保存在本地的图片的方式

最新推荐文章于 2024-07-31 01:22:49 发布
最新推荐文章于 2024-07-31 01:22:49 发布
阅读量5.4k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenshibailian/article/details/79030005
版权
1，可以考虑将图片保存在项目目录下，直接用相对路径引用图片即可
将图片保存在本地目录下的话：
2，可以在Tomcat的server.xml中配置文件的虚拟路径
3，通过输入输出流将文件传递给前端页面显示

前端页面通过img标签的src将图片的地址url传递过来

在控制器中的参数有url，HttpServletRequest,HttpServletResponse三个。

通过FileInputStream（new File(url)）将本地图片的字节码放到到输入流，通过response.getOutputStream()获取输出流，

之后将输入流中的字节码读取出来通过输出流响应到前端，

qq_94csbl
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jsp最简单的读取本地图片在前端显示_前端开发：express的具体操作流程
weixin_39946534的博客
11-24 650
大家好，我来了！本期为大家带来的Web前端学习知识是”前端开发：express的具体操作流程“，喜欢Web前端的小伙伴，一起看看吧！第一节 参数传递1.1参数传递传递参数1.2参数传递过滤数据过滤参数 返回不同的数据 参数不同返回不同1.2.1 get请求浏览器效果：1.2.2 post请求1.2.3 restful API本章作业如何参数传递get请求和post请求以及restful API请...
前端传来的图片并保存_各种返回图片在前端显示以及转化
weixin_39942213的博客
12-29 1827
前言作为前端工程师 的我们，日常少不了会跟图片打交道。以下是我了解的。一、图片在后端中存储一般来说，图片在后端的存储方式分为两种：其一：可以将图片以独立文件的形式存储在服务器的指定文件夹中，再将路径存入数据库字段中;其二：将图片转换成二进制流，直接存储到数据库的 Image 类型字段中.对于第一种存储方式，我们前端直接将存储路径赋值给 src 属性即可轻松显示。对于第二种存储方式，我们前端需要将其...
前端Vue页面中如何展示本地图片
xuan__xia的博客
10-28 3807
这就需要对这个请求的路径进行映射，以找到真正的存放图片的地址。我们使用标签展示图片，src属性设置成图片请求路径。但是图片是存放在本地的某个文件里，那如何才能找到呢？的格式，也就是会向后端发送这个请求获取图片。
HTML+JS实现本地图片预览（基础功能）
最新发布
猿小白的博客
07-31 180
HTML+JS实现本地图片预览（基础功能）
fileReader学习-前端展示本地图片
hongtaochi0464的博客
05-27 882
最近项目中会使用富文本编辑器，发现源码中有fileReader，来学习一下~ FileReader的学习 FileReader是一种异步文件读取机制，结合input:file可以方便的读取本地文件(图片/txt) 一、input的file类型 <input type=“file” id = “inputBox”> 在页面上的显示是这样的： 当你点击选择文件的按钮，便可以选择本地的文...
前台显示本地图片
weixin_30462049的博客
03-31 1034
原因分析和解决思路 为什么在模板引擎(JSP,ThemyLeaf等等)上不能正常显示本地图片? 　　因为在模板引擎中,你输入的路径名都会在前面默认加上项目路径(localHost:8080/XXX),导致路径错误 　　比如你输入的是:C:/test/test1.jpg 　　但实际的路径会变成 : localHost:8080/项目名/C:/test/test1.jpg 解决思路...
前端显示本地图片，压缩上传等
ITDogFire
07-08 435
convertToBase64: function (file, callback) { var FR = new FileReader(); FR.onload = function (e) { callback(e.target.result) }; FR.readAsDataURL(file); }, compress: function (f
java实现本地读取图片存储到数据库中并在html网页显示
05-18
在本文中，我们将深入探讨如何使用Java实现在本地读取图片并将其存储到数据库中，之后再通过HTML页面显示这些图片。这个过程涉及到的主要技术包括Java编程、数据库操作（特别是MySQL）以及前后端交互。 首先，我们...
js base46转码、保存图片到本地、img显示本地图片.zip
07-16
在这个"js base46转码、保存图片到本地、img显示本地图片.zip"的压缩包中，我们聚焦于JavaScript处理图像的一些核心功能，包括Base64编码、在页面上显示本地图片以及将图片保存到用户本地。下面，我们将深入探讨这些...
SpringMvc上传本地图片保存数据库并实时显示
05-07
在Spring MVC框架中，处理本地图片的上传、存储到数据库以及实时显示是一个常见的需求。这个过程涉及多个步骤，包括前端表单设计、后端控制器处理、文件上传逻辑、数据库操作以及视图展示。下面我们将详细讲解这个...
Laravel框架之解决前端显示图片问题
10-16
当开发者需要在用户上传图片后在前端页面显示这些图片时，会遇到一些典型的配置和路径问题，尤其是在从本地环境（如WAMP）迁移到生产环境（如LNMP）时。 在本地测试环境中（如使用WAMP环境），通常所有配置都是临时...
html5实现页面的显示本地图片
01-18
file标签，多选图片，然后图片显示在页面，使用html5 file api
前端访问不到本地图片，IDEA设置Tomcat虚拟路径
a597097186的博客
08-24 791
案例说明：数据库可以存储图片，但是相当耗费内存，怎么办呢？在数据库中存储图片的相对路径，访问资源时使用相对路径访问。 两种方法 1：图片存储在项目内，使用相对路径访问，该方法使用简单，但是，这样会造成项目体积急剧增大，可移植性变差，也不安全。 2：图片存储在单独的容量大的外存，使用绝对路径读取图片。 当启动一个部署在Tomcat的Web项目时，可以访使用相对路径或者绝对路径访问到...
前端通过http请求访问本地图片
dxjren的博客
04-22 1074
前端通过http请求访问本地图片
前端加载本地图片
qq_32079985的博客
10-27 265
vue项目里有时候想加载外部文件夹下的图片，可以使用这种方式。
前端显示本地图片_webUploader 获取图片 cross
weixin_39576149的博客
12-01 685
当显示上次已经上传的图片时，由于服务端没有进行设置，本地js代码也有问题，下面就记录下这个过程。1.浏览器控制台 console 下的报错如下:Access to XMLHttpRequest at 'http://139.198.18.156//CENTER/IMG/1536289650493.jpg' from origin 'http://127.0.0.1:8080' has been ...
前端js如何展示服务端保存到本地的照片（接收客户端上传的照片）
Jjb125的博客
05-08 2317
首先：将服务器接收的本地照片发布到iis服务器上，比如本例中是将存放图片的文件夹发布到192.168.2.204:9015 其次： 前端代码如下： <!DOCTYPE html> <html> <head> <title>ImgTest</title> <meta charset="utf-8"...
如何将存在本地服务器的图片，在APP前台显示
健康之家_Jacky
12-25 1928
将图片转为文件输入流，再将输入流读取转化为base64码，将base64码存入数据库中，前台可直接根据base64码读取成图片 在这里就不写数据库连接等方法了，直接把核心代码贴出来： File file = new File("D:\\Chrysanthemum.jpg"); FileInputStream is = new FileInputStream(file); byte[] ...
前端小贴士 - 本地图片预览
descire
03-14 694
前端本地图片预览功能
java后端获取前端图片并保存本地
05-11
要实现这个功能，可以使用以下步骤： 1. 在前端页面中使用 input 标签的 type="file" 属性，让用户选择要上传的图片。 2. 在后端编写接收图片的接口，接口的参数类型为 MultipartFile，这个类型是 Spring 框架自带的，可以直接使用。 3. 在后端接口中使用 MultipartFile 的 transferTo() 方法将图片保存到本地指定的路径下。 下面是一个简单的示例代码： 前端页面： ```html <form enctype="multipart/form-data" method="POST" action="/upload"> <input type="file" name="file"> <input type="submit" value="上传"> </form> ``` 后端接口： ```java @PostMapping("/upload") public String uploadFile(@RequestParam("file") MultipartFile file) { try { String filename = file.getOriginalFilename(); String directory = "/path/to/save/image/"; File destFile = new File(directory + filename); file.transferTo(destFile); return "上传成功"; } catch (Exception e) { e.printStackTrace(); return "上传失败"; } } ``` 在这个示例中，我们将图片保存到了本地的 /path/to/save/image/ 目录下。你需要根据实际情况修改这个路径。同时，我们也可以获取上传文件的文件名，可以根据需要进行更多的处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值