Docker化Angular+Spring Boot项目图片存储与访问问题求助

你的核心问题出在Docker容器的隔离性和资源存储路径的错误认知上：

1. Docker中Spring Boot容器与Angular容器是完全独立的文件系统，Spring将图片写入自己容器内的Angular assets路径，Angular容器根本无法访问该路径。
2. 用ResourceUtils.getURL("classpath:...")在Docker的Jar包环境中存在问题：classpath指向Jar包内部只读资源，无法写入上传文件，即便能写入也无法跨容器共享。

方案一：共享存储卷 + Spring Boot静态资源映射（推荐用于大图片） #

通过Docker共享卷存储图片，让Spring Boot对外提供图片访问接口，Angular通过API地址加载图片。

1. 修改Spring Boot配置 #

添加静态资源映射，让Spring可以读取指定目录的图片并对外暴露：

# application.properties
spring.web.resources.static-locations=file:/app/images/
spring.mvc.static-path-pattern=/images/**

或者使用Java配置类：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**")
                .addResourceLocations("file:/app/images/");
    }
}

2. 更新文件保存方法 #

修改存储路径为Docker容器内的独立目录，确保目录可写：

private String pathToSave = "/app/images/";

public void saveFile(String regional, Integer id, Binary image) throws Exception {
    // 确保存储目录存在
    File dir = new File(pathToSave);
    if (!dir.exists()) {
        dir.mkdirs();
    }

    if (image != null) {
        String fileName = this.regional(regional, id) + ".png";
        File fileToSave = new File(pathToSave + fileName);
        
        if (fileToSave.exists()) {
            log.error("Image for {} and regional: {} already exist! file: {}", id, regional, fileToSave);
            throw new Exception(String.format("Image for country: %s and region: %s already exist!", id, regional));
        }

        try (OutputStream out = new FileOutputStream(fileToSave)) {
            out.write(image.getData());
            out.flush();
            log.info("file saved: {}", fileToSave);
        } catch (IOException e) {
            log.error("Failed to save image", e);
            throw new Exception("Failed to save image", e);
        }
    } else {
        log.error("No image set");
        throw new Exception("No image provided");
    }
}

3. 修改Docker配置 #

Spring Boot的Dockerfile

添加目录创建命令：

FROM openjdk:17
ENV APP_HOME=/usr/app/
WORKDIR $APP_HOME
# 创建图片存储目录
RUN mkdir -p /app/images/
ADD target/World-0.0.1-SNAPSHOT.jar target/springboot-docker-city.jar
EXPOSE 8090
CMD ["java", "-jar", "target/springboot-docker-city.jar"]

Docker Compose配置

添加共享卷，确保容器重启后图片不丢失：

services:
  db:
    image: mongo:latest
    ports:
      - 27017:27017
    environment:
      SPRING_DATA_MONGODB_URI: mongodb://db:27017
      MONGO_INITDB_ROOT_USERNAME: user
      MONGO_INITDB_ROOT_PASSWORD: pass
    volumes:
      - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:r
  web:
    build: ./WorldBE/target/classes/county-fe
    ports:
      - 80:80
  api:
    build: ./WorldBE
    ports:
      - 8090:8090
    volumes:
      - shared-images:/app/images/  # 挂载共享卷
volumes:
  shared-images:  # 定义共享卷
  county:

4. Angular端修改图片加载路径 #

直接通过Spring Boot的API地址访问图片：

<img src="http://localhost:8090/images/{{imageFileName}}.png">

如果使用Nginx反向代理统一域名，可改为相对路径：

<img src="/images/{{imageFileName}}.png">

方案二：MongoDB GridFS存储（适合小图片） #

将图片直接存储到MongoDB的GridFS中，通过Spring接口返回图片流，无需管理文件系统。

1. 依赖配置（若未添加） #

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-mongodb</artifactId>
</dependency>

2. GridFS操作类 #

@Service
public class GridFsService {

    private final GridFsTemplate gridFsTemplate;
    private final MongoDatabase mongoDatabase;

    public GridFsService(MongoTemplate mongoTemplate) {
        this.gridFsTemplate = new GridFsTemplate(mongoTemplate.getMongoDatabaseFactory(), new DefaultGridFsMappingContext());
        this.mongoDatabase = mongoTemplate.getDb();
    }

    // 上传图片到GridFS
    public ObjectId uploadImage(String fileName, Binary image) throws IOException {
        GridFsUploadOptions options = new GridFsUploadOptions()
                .metadata(new Document("contentType", "image/png"));
        return gridFsTemplate.store(new ByteArrayInputStream(image.getData()), fileName, options);
    }

    // 从GridFS下载图片
    public Resource downloadImage(String fileName) throws IOException {
        GridFSFile file = gridFsTemplate.findOne(Query.query(Criteria.where("filename").is(fileName)));
        if (file == null) {
            throw new FileNotFoundException("Image not found: " + fileName);
        }
        GridFSBucket gridFSBucket = GridFSBuckets.create(mongoDatabase);
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        gridFSBucket.downloadToStream(file.getObjectId(), outputStream);
        return new ByteArrayResource(outputStream.toByteArray());
    }
}

3. 更新saveFile方法 #

@Autowired
private GridFsService gridFsService;

public void saveFile(String regional, Integer id, Binary image) throws Exception {
    if (image != null) {
        String fileName = this.regional(regional, id) + ".png";
        // 检查图片是否已存在
        GridFSFile existingFile = gridFsTemplate.findOne(Query.query(Criteria.where("filename").is(fileName)));
        if (existingFile != null) {
            log.error("Image for {} and regional: {} already exist! fileName: {}", id, regional, fileName);
            throw new Exception(String.format("Image for country: %s and region: %s already exist!", id, regional));
        }
        gridFsService.uploadImage(fileName, image);
        log.info("Image saved to GridFS: {}", fileName);
    } else {
        log.error("No image set");
        throw new Exception("No image provided");
    }
}

4. 添加图片访问接口 #

@RestController
@RequestMapping("/api/images")
public class ImageController {

    @Autowired
    private GridFsService gridFsService;

    @GetMapping("/{fileName}")
    public ResponseEntity<Resource> getImage(@PathVariable String fileName) throws IOException {
        Resource resource = gridFsService.downloadImage(fileName);
        return ResponseEntity.ok()
                .contentType(MediaType.IMAGE_PNG)
                .body(resource);
    }
}

5. Angular端修改图片加载路径 #

<img src="http://localhost:8090/api/images/{{imageFileName}}.png">

内容的提问来源于stack exchange，提问作者Alex