Django 学习笔记（三） --- HTML 模版加载 css、js、img 静态文件
人生苦短 ~
Tips：仅适用于 Python 3+（反正差别不大，py2 改改也能用）。因为据 Python 之父 Guido van Rossum 说会在 2020 年停止对 Python 2 的官方支持，所以如果你还在使用 Python 2 那就要早做准备了，毕竟没有官方的支持使用起来也不顺心的。
1. 创建目录
在我们的项目中创建静态文件存放目录，HelloDjango 目录下创建文件夹 static，然后在 static 文件目录中新建 js、css、images 三个文件夹用于存放静态资源文件
HelloDjango
|----HelloDjango
|----manage.py
|----db.sqlite3
|----mydjango
|----templates
|----static
|----images
|----css
|----js
2. 设置静态文件目录
打开文件 settings.py，在该文件中查找变量 STATIC_URL，在该变量下添加如下代码：
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
os.path.join(BASE_DIR, "recommend", "static"),
]
STATIC_URL 定义了 web 服务链接媒体的 URL 地址，STATICFILES_DIRS 允许自定义新的 static 目录。
3. 访问图片
在我们的静态目录中（/static/images/）放入一张 2018.jpg 图片，打开我们的 Django 服务访问我们的图片（http://127.0.0.1:8000/static/images/2018.jpg）：
如果没有出现请查看 setings.py 文件是否设置正确，并重启服务。如果出现了，试着加入其他类型的文件到 static 目录并在浏览器上访问。
4. 模版中加载图片
把我们的模版文件 index.html 文件修改如下：
<!DOCTYPE html>
{% load static %} <!-- 模板标签加载静态文件路径，也可以改成 load staticfiles -->
<html>
<head>
<title>HelloDjango</title>
</head>
<body>
<a href="/mydjango/index/">Index</a><hr />
<h3>HelloDjango</h3>
动态数据：<strong>{{ mydata }}</strong>
<hr />
<img src="{% static 'images/2018.jp' %}" /> <!-- 加载我们的静态图片 -->
</body>
</html>
在这里需要注意的是头部的 {% load static %} 是不可以缺少的，因为不引用的话就不能在加载图片时使用 static。
最后如果幸运的话输入网址（http://127.0.0.1:8000/mydjango/hello/）将会出现如下界面：
需要注意的一点是：
在 settings.py 文件中 DEBUG = True 的时候，Django 会帮我们加载我们的静态资源文件；
但是，在 DEBUG = False 的时候，Django 就不会帮我们加载我们的静态资源文件，会出现 404 错误，这时候需要其他工具来配置访问我们的静态资源文件，如 Nginx。
~ 我学 Python
Django 学习笔记（三） --- HTML 模版加载 css、js、img 静态文件的更多相关文章
- nginx 无法加载css/js图片等文件 404 not fund
刚配置Nginx反向代理,Nginx可能会出现无法加载css.js或者图片等文件,这里需要在配置文件*.conf里面加上如下配置项. location ~ .*\.(js|css|png|jpg)$ ...
- Spring Boot thymeleaf模版支持，css,js等静态文件添加
Thymeleaf引入 Thymeleaf是一个Java模板引擎开发库,可以处理和生成HTML.XML.JavaScript.CSS和文本,在Web和非Web环境下都可以正常工作. 1.添加依赖包 & ...
- [置顶] iOS学习笔记47——图片异步加载之EGOImageLoading
上次在<iOS学习笔记46——图片异步加载之SDWebImage>中介绍过一个开源的图片异步加载库,今天来介绍另外一个功能类似的EGOImageLoading,看名字知道,之前的一篇学习笔 ...
- Flutter学习笔记（19）--加载本地图片
如需转载,请注明出处:Flutter学习笔记(19)--加载本地图片 上一篇博客正好用到了本地的图片,记录一下用法: 首先新建一个文件夹,这个文件夹要跟目录下 然后在pubspec.yaml里面声明出 ...
- jQuery中的ready方法及实现按需加载css,js
模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下 一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...
- 网站加载css/js/img等静态文件失败
网站加载css/js/img等静态文件失败,报网站http服务器内部500错误.而服务器中静态文件存在且权限正常. 从浏览器中直接访问文件,出来乱码.这种问题原因在于iis中该网站mime配置报错,不 ...
- asp.net MVC发布iis无法加载css,js和图片
今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual s ...
- 文字添加响应事件，js动态加载CSS, js弹出DIV
文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
随机推荐
- ubuntu，day1基础命令，shutdown,man,touch,rm,mv,cp,stat,locale,apt,date,tzselect,cal,快捷方式，echo，查看文件
基本设置命令 1,shutdown 命令, shutdown -r now # 现在立即重启 shutdown -r + # 三分钟后重启 shutdown -r : #在12:12时将重启计算机 s ...
- b2b b2c o2o电子商务微服务云平台
大型企业分布式互联网电子商务平台,推出PC+微信+APP+云服务的云商平台系统,其中包括B2B.B2C.C2C.O2O.新零售.直播电商等子平台. 根据微服务化设计思想,结合spring cloud一 ...
- 获取IP地址方法
function getip() { static $ip = ''; $ip = $_SERVER['REMOTE_ADDR']; if(isset($_SERVER['HT ...
- (PMP)第6章-----项目进度管理
6.1 规划进度管理 输入 工具与技术 输出 1.项目章程 2.项目管理计划 (范围管理计划, 开发方法) 3.事业环境因素 4.组织过程资产 1.专家判断 2.数据分析 3.会议 1.进度管理计划 ...
- Struts2学习第三天——保存登陆信息及数据校验
在JSP中服务器端保存数据的作用域通常有request.session.application,它们对应的Servlet API分别是HttpServletRquerst.HttpSession.Se ...
- Android-broadcast静态动态广播
广播的静态和动态类型 静态广播: 1.继承之broadcastreceiver public class MyStaticBroadcastReceiver extends BroadcastRece ...
- Navicat for MYSQL 数据库手动同步方法
Navicat for MYSQL 数据库手动同步方法 数据库同步有两种类型,一是结构同步,一般是数据库表增删,或是表中字段的增删:二是数据同步,即是表里面的记录的增删. 现假设我要让本地数据 ...
- 分享Azure DevOps技术，来微信群吧！
现在QQ用户越来越少,基本上都转移到微信上了. 讨论问题,动不动就来一个微信群.下面这样几百人的微信群,专门讨论Azure DevOps (TFS)技术,你加入了么? 还等什么,扫描吧!
- [转]kaldi特征和模型空间转换
转:http://blog.csdn.net/shmilyforyq/article/details/76807431 博主话:这篇博客是对kaldi官网中Feature and model-spac ...
- fscanf_s与scanf_s的宽度参数与缓冲区参数分析
fscanf_s函数 在文件操作中经常会用到fscanf这个函数,但是在VC和VS中会有警告 意思是编译器觉得fscanf不安全,叫你考虑用一下fscanf_s这个函数来代替fscanf,fscanf ...