Python Web项目静态资源加载失败求助：CSS及图片无法正常显示

问题描述 #

运行app.py时CSS和图片无法正常加载，已完成以下操作但问题仍未解决：

• 静态文件与模板分离存放
• 执行pip install bootstrap-v5安装依赖
• 在INSTALLED_APPS中添加了"bootstrap5"配置

服务器返回404错误：

"GET /static/vendor/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -

HTML头部资源引用代码如下：

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <title>Villa Agency - Real Estate HTML5 Template</title>

    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/static/assets/css/fontawesome.css">
<link rel="stylesheet" href="/static/assets/css/templatemo-villa-agency.css">
<link rel="stylesheet" href="/static/assets/css/owl.css">
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">

排查与解决步骤 #

• 核对静态文件路径
  pip install bootstrap-v5安装的Bootstrap文件默认存放在Python环境的site-packages/bootstrap5/static/bootstrap目录下，而非你模板中引用的/static/vendor/bootstrap/路径。若要使用自定义路径，需手动将Bootstrap文件复制到项目的static/vendor/bootstrap/目录中。

• 使用Django静态文件模板标签
  Django模板中必须通过官方标签引用静态资源，否则无法正确解析路径。修改模板代码：

  {% load static %}
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <!-- 保留原有meta标签 -->
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'assets/css/fontawesome.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/templatemo-villa-agency.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/owl.css' %}">
    <!-- 保留第三方CDN资源 -->
  </head>
  

• 检查settings.py配置
  确保静态资源相关配置正确：

  STATIC_URL = '/static/'
  # 若项目根目录有自定义static文件夹，添加以下配置
  STATICFILES_DIRS = [
      BASE_DIR / "static",
  ]
  # 生产环境需配置STATIC_ROOT
  # STATIC_ROOT = BASE_DIR / "staticfiles"
  

• 确认INSTALLED_APPS完整性
  确保INSTALLED_APPS包含必要的静态资源处理应用：

  INSTALLED_APPS = [
      # 其他应用
      'django.contrib.staticfiles',
      'bootstrap5',
  ]
  

• 生产环境执行收集静态文件
  部署到生产环境时，必须执行以下命令将所有静态资源统一收集到STATIC_ROOT目录：

  python manage.py collectstatic
  

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