Vercel部署后图片无法显示问题求助

针对你遇到的情况，从Flask配置、Vercel部署规则、仓库文件这几个方向排查：

• 检查Flask静态文件引用方式
  Flask默认将静态资源放在static目录下，本地直接用相对路径可能正常，但部署到Vercel时，建议用Flask的url_for函数生成正确的静态资源路径，避免路径解析错误。示例：

  <!-- 不推荐硬编码相对路径 -->
  <img src="./static/img/photo.jpg">
  <!-- 推荐用url_for生成路径 -->
  <img src="{{ url_for('static', filename='img/photo.jpg') }}">
  

  确保你的Flask应用启动文件（比如app.py）没有修改默认的静态文件夹配置。

• 配置Vercel的路由规则
  Vercel部署Flask时需要通过vercel.json明确静态文件的路由映射，否则可能无法正确访问静态资源。在项目根目录创建或修改vercel.json，添加以下配置：

  {
    "builds": [
      {
        "src": "app.py",
        "use": "@vercel/python"
      }
    ],
    "routes": [
      {
        "src": "/static/(.*)",
        "dest": "/static/$1"
      },
      {
        "src": "/(.*)",
        "dest": "app.py"
      }
    ]
  }
  

  这个配置会优先匹配静态文件请求，再将其他请求交给Flask处理。

• 排查文件名大小写与仓库提交情况
  Vercel部署环境基于Linux，严格区分文件名大小写，而本地Windows/macOS可能不区分。检查HTML中引用的图片文件名大小写是否和Github仓库里的完全一致。
  同时确认图片文件没有被.gitignore规则排除，执行git status查看是否有未提交的图片文件，确保所有图片都已推送到Github仓库。

• 避免使用本地绝对路径
  如果HTML中引用了本地绝对路径（如C:/projects/myapp/static/img.jpg），部署后肯定无法访问，必须改为基于项目静态文件夹的相对路径或url_for生成的路径。

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