Django开发酒店模板时index.html页面静态图片无法显示如何解决

• 第一步：修正HTML结构错误
  你当前的HTML代码存在严重结构问题，<section>等内容标签错误放在了<head>标签内部，且缺少<body>标签、必要闭合标签，修正后的基础结构如下：

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <title>Deluxe - Free Bootstrap 4 Template by Colorlib</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 样式、脚本引用统一放在head标签内 -->
</head>
<body>
    <section class="home-slider owl-carousel">
      <div class="slider-item" style="background-image:url({% static 'images/bg_1.jpg' %});">
        <div class="overlay"></div>
        <div class="container">
          <div class="row no-gutters slider-text align-items-center justify-content-center">
          <div class="col-md-12 ftco-animate text-center">
            <div class="text mb-5 pb-3">
                <h1 class="mb-3">Welcome To Deluxe</h1>
                <h2>Hotels &amp; Resorts</h2>
                <img src="{% static 'images/bg_1.jpg' %}" alt="酒店背景" />
            </div>
          </div>
        </div>
        </div>
      </div>
    </section>
</body>
</html>

• 第二步：确认静态文件目录结构符合要求
  确保你的项目根目录（即BASE_DIR对应的目录）下的文件结构如下，注意大小写完全匹配：

项目根目录
├── static
│   └── images
│       └── bg_1.jpg
├── 你的应用文件夹
├── 项目同名配置文件夹
│   ├── settings.py
│   └── urls.py
└── manage.py

• 第三步：确认settings.py配置正确
  首先检查settings.py开头已经导入os模块：

import os

你当前的静态文件配置本身没有问题，同时确认DEBUG = True（开发环境下必须开启）。

• 第四步：配置项目根URL的静态文件服务
  打开项目同名配置文件夹下的urls.py，添加静态文件服务配置，完整示例如下：

from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
from 你的应用名.views import home # 导入你编写的home视图

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', home, name='home'), # 绑定首页路由
] + static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS[0]) # 开发环境下提供静态文件访问能力

• 第五步：关闭DEBUG时的特殊处理
  如果是生产环境关闭了DEBUG = False，需要先执行静态文件收集命令：

python manage.py collectstatic

执行后所有静态文件会自动汇总到你配置的assets文件夹，再配置Nginx等web服务器指向该文件夹提供静态资源访问即可，临时测试也可以用python manage.py runserver --insecure强制开启静态文件服务。

• 通用排查方法
  如果还是无法加载，按F12打开浏览器开发者工具，切换到「网络」标签刷新页面，看图片资源的请求状态：如果返回404就核对请求路径和实际文件路径是否一致；如果返回200但不显示就检查HTML结构和图片文件本身是否损坏。

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