Django零基础入门之静态文件的引用

陆遥

发布时间：2026-10-14| 6人浏览过

原创

本文介绍Django项目中如何正确配置和引用JavaScript、CSS及图片等静态文件。通过创建static目录、在settings.py中配置STATICFILES_DIRS路径，以及在HTML模板中使用{% load static %}和{% static %}标签，实现静态资源的有效加载。

引言：

在Django开发中，如何正确引入JavaScript、CSS和图片这三大类静态资源？本文将详细讲解静态文件引用的具体方法。

效果展示：

点击确定按钮后的页面表现。

1.静态文件引用：

（1）创建静态文件目录：

在项目根目录下新建static文件夹，并进一步细分创建css、image和js三个子目录，以便分类管理不同类型的静态文件。

（2）静态文件路径的配置：

打开settings.py文件，添加STATICFILES_DIRS配置项。该配置用于指定静态文件的查找目录，配置方式与templates目录类似。

在settings.py文件中加入以下代码即可生效：


# 配置静态文件的路径       BASE_DIR是项目根目录
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

（3）创建三大静态文件：

1. JS文件——在/static/js/目录下创建index.js。

2. CSS文件——在/static/css/目录下创建index.css。

3. 图片文件——在/static/image/目录下放置first.jpg。

总览：

（4）静态文件的引用：


{#静态文件的加载#}
{% load static %}

{#   注意：：： {%  %}这是模板标签    #}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试！</title>
    {#css文件的引用#}
    <link rel="stylesheet" href="{% static 'css/index.css' %}" rel="external nofollow" >
</head>
<body>

{#图片文件的引用#}
<img src="{%  static 'image/first.jpg' %}" alt="">

{#js文件的引用#}
<script src="{% static 'js/index.js' %}"></script>

</body>
</html>

至此，关于Django零基础入门之静态文件引用的内容介绍完毕。如需了解更多Django静态文件相关内容，请搜索本站历史文章或继续浏览后续文章，感谢支持！