Django模板静态资源404错误排查与配置指南

环境配置与版本说明

环境配置

• Django版本1.11
• python版本3.6.2

静态资源加载失败的成因分析

前言

在开发Django网站时，简单的示例通常能正常运行，但这些示例往往不涉及静态资源文件。当模板中需要引入CSS、JavaScript等静态文件时，如果直接将前端编写好的文件放入templates目录而不做额外处理，例如采用如下结构：

|templates

|----js

|--------xxxx.js

|----css

|--------xxxx.css

|----xxxx.html

运行网站后，会发现所有静态资源均加载失败。这是因为Django在渲染页面时，默认将模板所在目录映射到了网站的根目录，导致系统尝试从根目录下的静态资源文件夹中查找文件（而该位置实际并不存在所需文件），从而引发404错误。

Django静态文件配置与解决方案

解决方法

首先，确保settings.py文件中包含以下配置：

STATIC_URL = '/static/'

此配置用于定义静态文件的URL前缀，通常由Django自动生成。

在每一个需要使用静态资源的模板文件中，应将路径引用修改为指向static目录，例如：

/static/my_app/example.jpg

或者采用其他等效写法。

 {% load static %}
 <img src="{% static "my_app/example.jpg" %}" alt="My image"/>  

如果不使用默认的static标签，也可以自定义静态资源存放目录，配置方式如下：

 STATICFILES_DIRS = [
 os.path.join(BASE_DIR, "static"),
 '/var/www/static/',
 ]

需要注意的是，这里的static文件夹应位于当前应用（app）目录下，而非项目根目录。根目录下的static文件夹通常由collectstatic命令生成，用于收集STATICFILES_DIRS中指定的所有目录以及各个app中的static文件，以便在Apache等Web服务器部署时统一管理。

STATIC_ROOT = os.path.join(BASE_DIR, 'collected_static')

例如，我们在根目录下定义了一个名为collected_static的目录，用于集中存放所有收集到的静态资源文件。

以上内容涵盖了Django静态资源配置的核心要点，希望对读者有所帮助，欢迎继续支持本站。