Docker部署Flask+React应用加载后端图片遇404错误求助

针对你遇到的图片访问404问题，按以下步骤排查解决：

1. 为Flask配置文件访问路由 #

Flask默认仅对外暴露static目录下的静态资源，你的图片存在/app/files目录，需要手动注册路由允许外部访问：

from flask import Flask, send_from_directory
import os

app = Flask(__name__)

# 注册files目录的访问路由
@app.route('/files/<path:file_path>')
def serve_file(file_path):
    # 获取files目录的绝对路径
    files_dir = os.path.join(app.root_path, 'files')
    # 确保目录存在，避免报错
    if not os.path.exists(files_dir):
        os.makedirs(files_dir)
    return send_from_directory(files_dir, file_path)

# 其他业务路由...

2. 验证容器内文件是否存在且权限正常 #

首先进入Flask容器，检查目标图片是否存在：

# 替换api为docker-compose里的api服务名
docker exec -it api ls -l /app/files/test_image/

• 如果文件不存在：
  • 临时同步宿主机文件到容器：

    docker cp ./files/test_image/1.jpg api:/app/files/test_image/
    

  • 长期同步宿主机与容器目录：修改docker-compose的volume配置，将named volume改为绑定挂载：

    api:
      volumes:
        - .:/app
        - ./files:/app/files  # 替换原来的files:/app/files
    # 可删除volumes下的files定义（若不需要Docker卷持久化）
    

• 如果文件存在但权限不足，调整容器内目录权限：

  docker exec -it api chmod -R 755 /app/files
  

3. 确认请求路径与实际存储路径匹配 #

检查图片实际存储路径是否为/app/files/test_image/1.jpg，确保和请求路径/files/test_image/1.jpg完全对应，若存储结构不同，需调整路由或请求地址。

内容的提问来源于stack exchange，提问作者Private.cs