使用Springboot获取本地图片字节流，传入前端显示

需求： 前端请求，传入一个图片名称，后端springboot根据传入的图片名称进行读取，再传入到Thymeleaf。
在web开发中，前后端分离是非常重要的，因此也产生了一系列问题，这个案例不使用数据库，只是简单演示，如何由发起请求，再由后端读取数据，传入动态页面进行显示。

如果要使用动态页面需要在pom中配置thymeleaf依赖

        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        

后端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 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

    



    You can find your inlined image just below this text.


    


 

这里的 @后面的url指向了绑定为/image/{image_name}的Contoller。
再回过头看第一个"/home" controller，设置寻址为"index"，即templates/index.html，再将数据传入到Thymeleaf中，由Thymeleaf调用第二个Controller即getImage方法，最终得到img数据。

image.png