需求： 前端请求，传入一个图片名称，后端springboot根据传入的图片名称进行读取，再传入到Thymeleaf。
在web开发中，前后端分离是非常重要的，因此也产生了一系列问题，这个案例不使用数据库，只是简单演示，如何由发起请求，再由后端读取数据，传入动态页面进行显示。
如果要使用动态页面需要在pom中配置thymeleaf依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
后端contoller
@EnableAutoConfiguration
@ComponentScan
@Controller
public class Main {
public static void main(String[] args) {
SpringApplication.run(Main.class, args);
}
@RequestMapping(value = "/home")
public ModelAndView home(@RequestParam("name") String name ) throws IOException {
ModelAndView view = new ModelAndView("index");
view.addObject("image_name", name);
return view;
}
@RequestMapping(value = "/image/{image_name}", produces = MediaType.IMAGE_PNG_VALUE)
public ResponseEntity<byte[]> getImage(@PathVariable("image_name") String image_name) throws Exception{
byte[] imageContent ;
String path = "your image path with image_name";
imageContent = fileToByte(new File(path));
final HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.IMAGE_PNG);
return new ResponseEntity<>(imageContent, headers, HttpStatus.OK);
}
public static byte[] fileToByte(File img) throws Exception {
byte[] bytes = null;
ByteArrayOutputStream baos = new ByteArrayOutputStream();
try {
BufferedImage bi;
bi = ImageIO.read(img);
ImageIO.write(bi, "png", baos);
bytes = baos.toByteArray();
} catch (Exception e) {
e.printStackTrace();
} finally {
baos.close();
}
return bytes;
}
}
先看第二个controller方法，这里的@RequestMapping(value = "/image/{image_name}", produces = MediaType.IMAGE_PNG_VALUE)value绑定了请求的url，同时{image_name}会传入方法内部，produces设置了产生的数据类型。因为这里使用的数据是PNG格式，如果是其他image格式，需要修改方法内部的ContentType。这个controller其实是设置为Thymeleaf调用的。
再看看动态页面的代码 index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>
You can find <b>your inlined image</b> just below this text.
</p>
<p>
<img th:src="@{/image/${image_name}}" />
</p>
<p>
</p>
</body>
</html>
这里的<img th:src="@{/image/${image_name}}" /> @后面的url指向了绑定为/image/{image_name}的Contoller。
再回过头看第一个"/home" controller，设置寻址为"index"，即templates/index.html，再将数据传入到Thymeleaf中，由Thymeleaf调用第二个Controller即getImage方法，最终得到img数据。
image.png
