Django搭建简单多页网站本地运行无法加载背景图片、提示找不到资源求助

核心问题排查及修复步骤 #

• 模板缺少静态文件加载声明
  你的HTML模板顶部没有添加{% load static %}标签，Django无法识别{% static %}模板语法，会将其作为普通字符串输出，导致路径错误。需在HTML文件第一行补充该声明。

• 资源引用逻辑与配置不匹配
  你单独配置了MEDIA目录用于存放媒体资源，但代码混用了静态文件引用规则：

  • 如果你计划将图片放在根目录的media文件夹下：不要使用{% static %}标签，将img的src属性改为src="{{ MEDIA_URL }}ocean.jpg"。同时需要在settings.py的TEMPLATES.OPTIONS.context_processors中添加django.template.context_processors.media，保证模板能拿到MEDIA_URL变量。
  • 如果你想继续使用{% static %}标签引用：需要将media文件夹整体移动到配置的static目录下，文件实际路径改为BASE_DIR/static/media/ocean.jpg，原有引用逻辑才会生效。

• 模板路径配置错误
  render函数的第二个参数应为模板目录下的相对路径，不能填写本地绝对路径。首先在settings.py的TEMPLATES.DIRS中添加你的模板存放路径BASE_DIR / 'apps/core/templates'，之后将render的第二个参数改为core/base.html即可。

• 本地开发缺少媒体资源路由
  Django默认在开发模式下不会自动处理MEDIA路径的访问请求，需要在项目根目录的urls.py中补充路由配置：

  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns = [
      # 此处保留你原有配置的其他路由规则
  ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
  

• 验证文件实际存放位置
  完成上述配置后检查图片文件实际存放路径是否和引用逻辑匹配：

  • 静态文件引用逻辑：文件需存放在BASE_DIR/static/media/ocean.jpg
  • 媒体文件引用逻辑：文件需存放在BASE_DIR/media/ocean.jpg

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