Django环境下HTML无法加载本地图片问题排查求助

你之前的排查方向存在核心偏差：Django 默认不会对外暴露 templates 目录下的文件，该目录仅用于存储待渲染的模板内容，所有本地静态资源（图片、CSS、JS）都需要按照 Django 的静态资源规则配置才能正常访问，具体操作步骤如下：

正确配置流程 #

• 调整目录结构
  在对应的 Django app 目录下新建 static 文件夹，在 static 文件夹内新建 images 子目录，将需要引用的本地图片移动到 app/static/images/ 路径下。禁止将静态资源存放在 templates 目录下，该目录不支持直接对外访问。
• 核对 settings.py 配置
  打开项目配置文件 settings.py，确认存在以下静态资源相关配置，开发环境下路径必须指向你创建的 static 目录：

  import os
  STATIC_URL = 'static/'
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, '你的app名称/static'),
  ]
  

• 修改模板引用语法
  在需要引用图片的 HTML 文件最顶部添加静态资源标签加载语句：{% load static %}，删除原来写的相对路径引用代码，替换为 Django 专用的静态资源引用语法：

  <img src="{% static 'images/img.jpg' %}" height="400" width="374">
  

• 补充开发环境路由映射
  打开项目根目录的 urls.py 文件，添加开发环境下的静态资源路由规则，否则 Django 不会响应静态资源的请求：

  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns = [
      # 你原本配置的所有业务路由
  ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
  

验证排查要点 #

• 所有配置修改完成后，重启 Django 本地开发服务，按 Ctrl+F5 硬刷新浏览器清除缓存后再测试
• 打开浏览器开发者工具的 Network 面板，查看图片请求的状态码：返回404优先核对路径拼写、static目录配置；返回403优先核对目录访问权限；返回500直接查看Django控制台输出的报错日志定位具体问题
• 不要使用HTML相对路径直接引用磁盘文件：Django的页面访问路径是路由映射的地址，和模板文件的磁盘存储路径没有对应关系，直接写相对路径会导致请求地址匹配错误，这也是你之前将图片和HTML放在同目录依然加载失败的核心原因。
• 外部直链图片可以正常加载，说明浏览器渲染本身没有问题，问题完全出在本地静态资源的配置逻辑上，和模板继承、block语法没有关联。

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