前端读取本地图片信息进行回显

最新推荐文章于 2026-05-02 04:21:24 发布

原创

最新推荐文章于 2026-05-02 04:21:24 发布 · 3.5k 阅读

标签

#image #js #java

本文介绍了如何在前端读取本地硬盘上的图片信息并进行回显，主要涉及SpringBoot控制器、HTML和Thymeleaf模板的使用，通过控制器处理绝对路径的图片请求，然后在前端展示。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

在开发项目中，有将图片存储到项目中的，也有将图片存储到nginx，或者文件服务器等等，这次要做的是读取本地硬盘上的图片信息，进行前端的回显，不啰唆，直接上代码吧。

1，跳转controller层，传递绝对路径的参数：

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ImageController {

@RequestMapping("/goIndex")
public String goToIndex(Model model) {
//根据条件读取数据库信息
model.addAttribute("url", "C:/Users/Public/Pictures/Sample Pictures/张1阿森纳.jpg");
return "showImage";
}

}

2.html层：高度和宽度什么的可以自己设置，用的是springboot中的thymeleaf（也可以自己写个js用attr（src,"自己拼接路径"））

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
</head>
<body>
<img alt="" th:src="'/getImgByPath?path=' + ${url}" width="90px" height="90px"/>
</body>

</html>

3.调用controller层:

import java.io.File;
import java.io.InputStream;
import java.io.OutputStream;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import o

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看