BUG

路径正确，但图片加载失败

<img src="D:/pictures/pets/1.jpg" alt="D:/pictures/pets/1.jpg">

DEBUG

• 图片未放在 static 文件夹下‌

Flask 默认只从项目根目录下的 static 文件夹提供静态资源（如图片、CSS、JS）。若图片放在其他位置（如 templates/ 或自定义目录），Flask 无法直接访问，除非手动配置路由或修改 static_folder。

<img src="static/images/1.jpg" alt="static/images/1.jpg">

其他可能

• HTML 中引用路径错误‌
  即使文件在 static/ 中，若在模板中使用相对路径（如 ），可能因模板渲染上下文导致路径解析失败。应使用 Flask 提供的 url_for() 函数动态生成正确 URL。

• Flask 配置了非默认的静态文件夹‌
  若创建应用时自定义了 static_folder（如 app = Flask(name, static_folder=‘assets’)），则需将图片放入该自定义目录，并确保引用时匹配新路径。

• 浏览器缓存或 404 错误未被察觉‌
  浏览器可能缓存了旧资源，或实际请求返回 404。需通过开发者工具检查网络请求状态。

推荐操作步骤‌

• 确认项目结构符合 Flask 约定‌

your_flask_app/
├── app.py
├── templates/ # HTML 模板放这里
└── static/ # 图片、CSS、JS 等静态资源放这里
 └── images/
  └── your_image.jpg

• 在 HTML 模板中使用 url_for() 引用图片‌

<img src="{{ url_for('static', filename='images/your_image.jpg') }}" alt="描述">

• 检查文件路径和大小写是否完全匹配‌
  操作系统区分大小写，确保 filename= 参数与实际文件路径一致。

• 使用浏览器开发者工具排查‌
  按 F12 打开开发者工具。
  切换到 ‌Network‌ 标签，刷新页面，查看图片请求是否返回 ‌404‌。
  若为 404，说明路径错误或文件不存在；若为 200 但图片不显示，可能是文件损坏或格式问题。
  ‌清除浏览器缓存或使用无痕模式测试‌
  有时旧缓存会导致资源加载异常。

• 若图片不在 static/ 中，需自定义路由‌
  例如，图片在 uploads/ 目录：

from flask import send_from_directory

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory('uploads', filename)

<img src="{{ url_for('uploaded_file', filename='image.jpg') }}">

补充说明‌

Flask 默认静态文件 URL 前缀为 /static/，可通过 static_url_path 参数修改 ‌。
若使用 PyInstaller 打包为 exe，需动态设置 static_folder 为 exe 所在目录 ‌。

转载自CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/qq_45800521/article/details/158685312