Docker化Express.js+Vue应用无法显示上传静态图片问题

全栈应用已完成Docker容器化部署，架构包含Vue.js容器、Node.js容器、MySQL容器与Traefik容器，除用户上传的图片无法在前端正常展示外，其余功能均运行正常。该功能在本地开发环境可正常运行，容器化部署后经多轮排查仍未解决图片加载失败问题。

现有实现信息 #

• Vue侧拉取图片列表的loadAllImages方法代码：

async loadAllImages(){
      const caseId = this.bozpCases.id;
      CaseImagesService.getAllImages(caseId)
      .then((response) => {
        if(!response.data){
          throw "Error";
        }
        const data = response.data;
        const images = [];
        for (const id in data) {
          images.push({
            id: data[id].id,
            fileName: data[id].fileName,
            mimeType: data[id].mimeType,
            caseId: data[id].caseId,
            path: data[id].path,
          });
        }
        this.images = images;
        console.log('file name ' + images[0].fileName);
        console.log('mime type ' + images[0].mimeType);
        console.log('path ' + images[0].path);
      })
    },
  }

• Vue前端图片渲染模板代码：

<section v-for="image in images" :key="image.id">
   <v-col>
      <v-img :src="`${image.fileName}`" max-height="125" max-width="125" />
   </v-col>
</section>

• 浏览器控制台打印的图片元信息日志：

file name 19.06.2022,15:11:23-API.png
mime type image/png
path /usr/src/app/uploads

• Express服务端静态资源目录配置代码：

app.use(express.static('uploads'))

问题由4个配置错误共同导致，本地开发环境因为有devServer代理、工作目录固定所以能正常运行，容器化后这些隐藏的配置问题全部暴露：

1. 前端图片访问路径拼接错误：当前v-img的src仅传入文件名，没有拼接静态资源的访问路径，浏览器会默认向当前前端站点的根路径请求图片资源，根本不会打到Node.js的静态资源服务。
2. Express静态资源配置使用相对路径：express.static('uploads')采用相对路径匹配，容器内Node进程的启动工作目录如果和本地不一致，会直接找不到uploads目录的位置。
3. 接口返回的path字段是容器内部文件系统绝对路径（/usr/src/app/uploads），这类路径只能在服务器/容器内部识别，浏览器无法直接访问容器内的文件路径。
4. Traefik路由规则缺失：现有Traefik配置大概率只做了前端页面、API接口的路由转发，没有配置/uploads前缀的静态资源路由规则，就算前端路径拼对，请求也会被错误转发到Vue容器，被前端路由拦截返回404。

按以下步骤逐一修改即可解决问题：

1. 修正Express静态资源配置，使用绝对路径避免容器内路径识别偏差，同时显式指定静态资源的访问前缀：

const path = require('path')
// 替换原有静态资源配置
app.use('/uploads', express.static(path.join(__dirname, 'uploads')))

修改完成后，上传文件的访问规则为：http://服务域名/uploads/文件名，比如日志里的19.06.2022,15:11:23-API.png对应的访问地址是http://你的域名/uploads/19.06.2022,15:11:23-API.png。
2. 修正前端图片渲染的src拼接逻辑，补全静态资源路径前缀：

<section v-for="image in images" :key="image.id">
   <v-col>
      <!-- 同域名部署走Traefik转发直接用相对路径即可，跨域部署补全后端服务域名 -->
      <v-img :src="`/uploads/${image.fileName}`" max-height="125" max-width="125" />
   </v-col>
</section>

3. 检查Docker配置，为uploads目录配置持久化卷：
   确保Node.js容器内的/usr/src/app/uploads目录挂载到宿主机指定目录或Docker共享卷，避免容器重启后上传的文件丢失。配置完成后进入Node.js容器执行ls /usr/src/app/uploads，能看到已上传的图片文件即为配置正确。
4. 补全Traefik路由规则：新增路由匹配规则，将所有路径前缀为/uploads的请求直接转发到Node.js服务的对应端口，禁止转发到Vue前端容器，避免请求被前端路由拦截。
5. 验证：修改完成后先直接在浏览器访问单张图片的完整地址，能正常打开图片说明服务端、路由配置正确，清空浏览器缓存后刷新前端页面即可正常加载所有图片。

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