使用python manage.py runserver加载HTML模板无样式问题求助

• 本地双击HTML文件时，浏览器通过file://协议直接读取本地资源，相对路径可直接生效；但通过Django的runserver启动HTTP服务后，Django默认不会处理静态文件的请求路由，导致样式、脚本、图片等资源无法被服务器正确返回，页面仅显示纯文本。
• 你的HTML模板使用相对路径（如css/style.css、images/banner1.jpg），在Django的HTTP服务环境下，这些路径对应的请求地址（如http://localhost:8000/css/style.css）未被配置为静态文件访问路径，服务器返回404错误，资源加载失败。

1. 配置Django静态文件设置 #

打开项目根目录的settings.py，确认以下配置：

STATIC_URL = '/static/'

import os
# 替换为你存放css、js、images的实际目录
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

示例：若你的css、js、images文件夹都在项目根目录的static文件夹下，上述配置即可生效；若资源在templates/my_template/static下，则修改为os.path.join(BASE_DIR, 'templates/my_template/static')

2. 修改HTML模板的资源引用方式 #

• 在HTML的<head>最顶部添加Django静态文件模板标签：

{% load static %}

• 将所有资源的相对路径替换为Django静态引用格式：
  • 原样式链接：<link href="css/style.css" ...> → 修改为 <link href="{% static 'css/style.css' %}" ...>
  • 原脚本引用：<script src="js/jquery-1.9.0.min.js"></script> → 修改为 <script src="{% static 'js/jquery-1.9.0.min.js' %}"></script>
  • 原图片路径：<img src="images/banner1.jpg" ...> → 修改为 <img src="{% static 'images/banner1.jpg' %}" ...>

3. 配置视图与路由 #

确保视图正确渲染模板（views.py）：

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

配置路由（urls.py）：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

4. 重启服务 #

执行python manage.py runserver重启Django服务，再次访问页面即可正常加载所有资源。

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