【Spring Boot 3】【Web】返回图片

背景介绍开发环境开发步骤及源码工程目录结构

背景

软件开发是一门实践性科学，对大多数人来说，学习一种新技术不是一开始就去深究其原理，而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中，每次学习新技术总是要花费或多或少的时间、检索不止一篇资料才能得出一个可工作的DEMO，这占用了我大量的时间精力。因此本文旨在通过一篇文章即能还原出可工作的、甚至可用于生产的DEMO，期望初学者能尽快地迈过0到1的这一步骤，并在此基础上不断深化对相关知识的理解。

为达以上目的，本文会将开发环境、工程目录结构、开发步骤及源码尽量全面地展现出来，文字描述能简则简，能用代码注释的绝不在正文中再啰嗦一遍，正文仅对必要且关键的信息做重点描述。

介绍

本文介绍开发 Spring Boot Web 应用时如何返回图片给前端显示。

开发环境

开发步骤及源码

1> 创建Maven工程，添加依赖。

<code><?xml version="1.0" encoding="UTF-8"?>code>

<project xmlns="http://maven.apache.org/POM/4.0.0"code>

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"code>

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">code>

<modelVersion>4.0.0</modelVersion>

<parent>

<groupId>com.jiyongliang</groupId>

<artifactId>springboot3-web</artifactId>

<version>0.0.1</version>

</parent>

<artifactId>springboot3-web-media</artifactId>

<properties>

<java.version>21</java.version>

<maven.compiler.source>21</maven.compiler.source>

<maven.compiler.target>21</maven.compiler.target>

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

<spring-boot.version>3.3.3</spring-boot.version>

<lombok.version>1.18.34</lombok.version>

</properties>

<dependencyManagement>

<dependencies>

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-dependencies</artifactId>

<version>${spring-boot.version}</version>

<type>pom</type>

<scope>import</scope>

</dependency>

</dependencies>

</dependencyManagement>

<dependencies>

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<dependency>

<groupId>org.projectlombok</groupId>

<artifactId>lombok</artifactId>

<version>${lombok.version}</version>

<scope>compile</scope>

</dependency>

</dependencies>

<build>

<pluginManagement>

<plugins>

<plugin>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-maven-plugin</artifactId>

</plugin>

</plugins>

</pluginManagement>

</build>

</project>

2> 定义SpringBoot应用启动类。

package com.jiyongliang.springboot;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication

public class SpringBoot3WebMediaApplication {

public static void main(String[] args) {

SpringApplication.run(SpringBoot3WebMediaApplication.class, args);

}

}

3> 创建测试用图片资源，目录：src/main/resources/images。

4> 创建返回图片的 Controller。

<code>package com.jiyongliang.springboot.controller;

import lombok.extern.slf4j.Slf4j;

import org.springframework.core.io.FileSystemResource;

import org.springframework.http.HttpStatus;

import org.springframework.http.MediaType;

import org.springframework.http.ResponseEntity;

import org.springframework.util.ResourceUtils;

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

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

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

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

import java.io.File;

import java.io.FileNotFoundException;

import java.io.IOException;

import java.nio.file.Files;

@RestController

@RequestMapping("/image")

@Slf4j

public class ImageController {

/**

* http://localhost:8080/image/jpg/WARCRAFT.jpg

*/

@GetMapping("/jpg/{imageName}")

public ResponseEntity<FileSystemResource> jpg(@PathVariable(name = "imageName") String imageName) {

return getImageAsResource(imageName, MediaType.IMAGE_JPEG);

}

/**

* http://localhost:8080/image/png/wukong.png

*/

@GetMapping("/png/{imageName}")

public ResponseEntity<byte[]> png(@PathVariable(name = "imageName") String imageName) {

return getImageAsByteArray(imageName, MediaType.IMAGE_PNG);

}

private ResponseEntity<FileSystemResource> getImageAsResource(String imageName, MediaType mediaType) {

try {

File file = ResourceUtils.getFile("classpath:images/" + imageName);

FileSystemResource resource = new FileSystemResource(file);

return ResponseEntity.ok()

.contentLength(file.length())

.contentType(mediaType)

.body(resource);

} catch (FileNotFoundException e) {

log.error("File[{}] is not existed", imageName);

return ResponseEntity.status(HttpStatus.BAD_REQUEST).build();

}

}

private ResponseEntity<byte[]> getImageAsByteArray(String imageName, MediaType mediaType) {

try {

File file = ResourceUtils.getFile("classpath:images/" + imageName);

byte[] imageBytes = Files.readAllBytes(file.toPath());

return ResponseEntity.ok()

.contentLength(imageBytes.length)

.contentType(mediaType)

.body(imageBytes);

} catch (FileNotFoundException e) {

log.error("File[{}] is not existed", imageName);

return ResponseEntity.status(HttpStatus.BAD_REQUEST).build();

} catch (IOException e) {

log.error("Unexpected server error: {}", e.getMessage());

return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();

}

}

}

5> 启动应用，使用浏览器测试。

http://localhost:8080/image/jpg/WARCRAFT.jpghttp://localhost:8080/image/png/wukong.png

工程目录结构