为何CSS仅在Django首页URL加载，其他URL无法加载？

这问题我碰到过好多次啦，核心原因就是相对路径的解析逻辑差异，咱们一步步来搞定：

为什么会出现这个问题？ #

• 当你访问首页（根路径/）时，浏览器会把static/assets/...这类相对路径解析为http://yourdomain.com/static/assets/...，刚好匹配你的静态资源目录，所以CSS能正常加载
• 但访问product/<slug>路径时，浏览器会把当前页面的路径当成/product/，相对路径就会被解析成http://yourdomain.com/product/static/assets/...，这显然找不到你的静态资源文件夹，自然加载失败

最规范的解决方案（官方推荐） #

虽然你提到没使用{% static %}标签，但这是Django处理静态资源的标准方式，能一劳永逸解决路径问题：

1. 在product.html模板的最顶部添加静态标签加载语句：

   {% load static %}
   

2. 把所有静态资源的相对路径替换成{% static %}标签的形式，比如：
   原来的：

   href="static/assets/images/icons/apple-touch-icon.png"
   

   改成：

   href="{% static 'assets/images/icons/apple-touch-icon.png' %}"
   

   这样Django会自动根据你设置的STATIC_URL生成正确的绝对路径，不管当前页面在哪个URL层级都能正确找到资源

临时替代方案（不用{% static %}标签的情况） #

如果暂时不想修改模板标签，也可以用下面两种方法应急：

• 方法一：改用绝对路径
  给所有静态资源的引用加上开头的斜杠，让浏览器直接从域名根目录开始查找，比如：

  href="/static/assets/images/icons/apple-touch-icon.png"
  

• 方法二：添加<base>标签
  在HTML的<head>标签内添加一行代码，告诉浏览器所有相对路径都以根目录为基准：

  <base href="/">
  

  这样原来的相对路径就会被浏览器正确解析为根目录下的静态资源路径

验证方法 #

修改后可以打开浏览器开发者工具（按F12），切换到Network标签，刷新页面查看静态资源的请求路径，确认是不是指向正确的/static/...地址，这样就能快速排查问题啦

内容的提问来源于stack exchange，提问作者Mostafa A. Eldine