Django自定义404页面背景图片无法渲染问题求助

问题描述 #

在Django项目中配置自定义404错误页面，页面能正常渲染，但背景图片始终无法显示。已确认文件名正确，图片存放于static文件夹内，更换图片后问题依旧，怀疑代码存在问题，附上代码请求排查修复。

用户提供的代码：

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .error-page {
            background-image: url('{% static "404image10.jpeg" %}');
            /* Add other background styling properties as needed */
        }
    </style>
</head>
<body>
    <div class="container-fluid error-page">
        <div class="row justify-content-center">
            <div class="col-md-6 text-center">
                <h1 class="display-1 text-white">Error 404</h1>
                <p class="lead text-white">Page not found</p>
            </div>
        </div>
    </div>    
</body>
</html>

排查与修复方案 #

1. 补全背景样式属性 #

当前代码仅设置了background-image，缺少几个关键属性，会导致背景图无法正常显示：

• min-height: 100vh：确保容器占满整个视口高度，否则容器高度可能为0，看不到背景
• background-size: cover：让背景图自适应容器尺寸，避免只显示部分
• background-repeat: no-repeat：防止背景图重复平铺
• background-position: center center：让背景图居中显示

2. 确认静态文件配置 #

检查项目settings.py中的静态文件配置是否正确：

STATIC_URL = '/static/'
# 如果静态文件放在项目根目录的static文件夹下，添加以下配置
STATICFILES_DIRS = [
    BASE_DIR / "static",
]
# 生产环境需要配置STATIC_ROOT
# STATIC_ROOT = BASE_DIR / 'staticfiles'

3. 验证图片路径 #

• 确认图片确实放在static根目录下，若在子文件夹（如static/images），则需要修改路径为{% static "images/404image10.jpeg" %}
• 打开浏览器开发者工具（F12），切换到Network标签，刷新页面查看图片请求状态：若为404，说明路径错误，复制请求URL到地址栏验证是否能访问

修复后的完整代码 #

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Page Not Found</title>
    <style>
        .error-page {
            background-image: url('{% static "404image10.jpeg" %}');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            min-height: 100vh;
        }
    </style>
</head>
<body>
    <div class="container-fluid error-page">
        <div class="row justify-content-center">
            <div class="col-md-6 text-center">
                <h1 class="display-1 text-white">Error 404</h1>
                <p class="lead text-white">Page not found</p>
            </div>
        </div>
    </div>    
</body>
</html>

额外检查（生产环境） #

如果是部署到生产环境，需要运行python manage.py collectstatic命令，将所有静态文件收集到STATIC_ROOT指定的目录，确保服务器能正确访问。

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