Django中的静态文件、路径、访问静态文件的方法

1.什么是静态文件

不能与服务器端做动态交互的文件都是静态文件

如:图片,css,js,音频,视频,html文件(部分)

2.静态文件配置

settings.py 中配置一下两项内容:

1.配置静态文件的访问路径

通过哪个url地址找静态文件

STATIC_URL = '/static/'

说明:

指定访问静态文件时是需要通过 /static/xxx或 127.0.0.1:8000/static/xxx

xxx 表示具体的静态资源位置

2.配置静态文件的存储路径 STATICFILES_DIRS

STATICFILES_DIRS保存的是静态文件在服务器端的存储位置

示例:

file: setting.py

STATICFILES_DIRS = (

os.path.join(BASE_DIR, "static"),

)

3.访问静态文件

使用静态文件的访问路径进行访问

访问路径: STATIC_URL = '/static/'

示例:

<img src="/static/images/lena.jpg">

<img src="http://127.0.0.1:8000/static/images/lena.jpg">

settings.py中设置

DEBUG = True #注意 如果将DEBUG设置为 False 将无法访问到静态文件

复制代码
STATIC_URL = '/static/'


STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

访问的例子 http://127.0.0.1:8000/static/code.png

通过 {% static %}标签访问静态文件

{% static %} 表示的就是静态文件访问路径

加载 static

{% load static %}

使用静态资源时

语法:

{% static '静态资源路径' %}

示例:

<img src="{% static 'images/lena.jpg' %}">

此setting配置静态文件的方案,只用于测试开发环境,

正式上线后,将采取新的解决方案:

​ 1、nginx 挂载静态文件

​ 2、CDN 内容网络分发服务,【阿里云 网宿 蓝汛】,将所有静态文件交由CDN即可

​ 只需将代码中所有src地址,填写成cdn公司提供的地址域名即可

​ CDN - 用户请求静态资源时,解析用户所在位置信息,将请求调度到离用户最近的服务器上,减少无必要网络层跳转


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/liuxingxing_star/article/details/103995191

下面使用 nginx 挂载静态文件的方式

首先需要收集形态资源文件

将你的工程,下面所有APP下面的static目录,收集到你的工程下面的 media将要被存放的目录

settings.py文件中新增配置项

STATIC_ROOT = os.path.join(BASE_DIR, "media") #将要收集的目录

STATICFILES_DIRS = (

os.path.join(BASE_DIR, "static"), #将要被收集的目录

)

STATICFILES_DIRS 是用来指定 Django 在收集静态文件时需要搜索的目录列表,而 STATIC_ROOT 则是指定 Django 在收集静态文件后将其存放的目录。STATICFILES_DIRS 中的文件会被收集到 STATIC_ROOT 指定的目录中,以便在部署时能够被服务器提供。STATIC_ROOT 应该是一个绝对路径。

STATICFILES_DIRS 将要被收集的目录, STATIC_ROOT 收集完存放的目录

注意 你工程下可以有很多个APP,每个APP下面都可以有一个static文件夹

相关推荐
SelectDB2 小时前
Apache Doris Python UDF:让 SQL 直接调用 Python 生态,支撑 Agent 时代复杂业务逻辑
大数据·数据库·python
泯泷3 小时前
第 2 篇:设计第一套字节码:Opcode、Instruction 与 Constant Pool
前端·javascript·安全
泯泷3 小时前
第 1 篇:从 1 + 2 开始:亲手写出第一台 JSVM
前端·javascript·安全
朦胧之3 小时前
页面白屏卡住排查方法
前端·javascript
犇驫聊AI4 小时前
Chrome DevTools MCP + Claude Code 自定义skills生成接口代码生成器
前端·javascript
kyriewen4 小时前
别再这样写 async/await 了:我在 Code Review 中见过最多的 8 个错误
前端·javascript·面试
用户298698530149 小时前
在 React 中使用 JavaScript 将 Excel 转换为 SVG
前端·javascript·react.js
labixiong10 小时前
手写Promise--微任务、静态方法、async/await 全搞懂(三)
前端·javascript
荣码10 小时前
GraphRAG:普通RAG只能回答"点"的问题,我踩了4个坑才搞懂
java·python
铁皮饭盒11 小时前
3行代码搞定页面截图,Bun.WebView真的简单
javascript