Docker容器中复制的图片如何在HTML中正确配置src引用？

你的问题核心是Spring Boot默认不会暴露容器中自定义目录下的静态资源——你把图片放到了容器的/frontend/目录，但Spring Boot未配置映射该路径，导致前端无法访问。解决分两步：

1. 配置Spring Boot映射静态资源目录 #

需要让Spring Boot识别并处理/frontend/目录下的静态文件，有两种实现方式：

方式一：修改application.yaml #

在你的application.yaml中添加静态资源位置配置：

spring:
  web:
    resources:
      static-locations: classpath:/static/, file:/frontend/

该配置会让Spring Boot同时处理自身内置的静态目录（比如Angular打包文件所在的static目录）和容器的/frontend/目录。

方式二：编写Java配置类 #

如果需要更精细的路径控制，创建一个Web配置类：

@Configuration
public class StaticResourceConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 将URL中/frontend开头的请求，映射到容器的/frontend/目录
        registry.addResourceHandler("/frontend/**")
                .addResourceLocations("file:/frontend/");
    }
}

2. 设置HTML中的图片路径 #

配置生效后，前端直接使用以下路径即可加载图片：

<img
    class="my-class"
    alt="alt"
    src="/frontend/my_logo.png"
/>

本地测试时也可以用完整URL：

<img
    class="my-class"
    alt="alt"
    src="http://localhost:8090/frontend/my_logo.png"
/>

验证步骤 #

1. 重新构建Docker镜像并启动容器
2. 直接在浏览器访问http://localhost:8090/frontend/my_logo.png，能看到图片说明配置生效
3. 刷新前端页面，图片即可正常显示

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