人生苦短 ~

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 静态文件的更多相关文章

  1. nginx 无法加载css/js图片等文件 404 not fund

    刚配置Nginx反向代理,Nginx可能会出现无法加载css.js或者图片等文件,这里需要在配置文件*.conf里面加上如下配置项. location ~ .*\.(js|css|png|jpg)$ ...

  2. Spring Boot thymeleaf模版支持，css,js等静态文件添加

    Thymeleaf引入 Thymeleaf是一个Java模板引擎开发库,可以处理和生成HTML.XML.JavaScript.CSS和文本,在Web和非Web环境下都可以正常工作. 1.添加依赖包 & ...

  3. [置顶] iOS学习笔记47——图片异步加载之EGOImageLoading

    上次在<iOS学习笔记46——图片异步加载之SDWebImage>中介绍过一个开源的图片异步加载库,今天来介绍另外一个功能类似的EGOImageLoading,看名字知道,之前的一篇学习笔 ...

  4. Flutter学习笔记（19）--加载本地图片

    如需转载,请注明出处:Flutter学习笔记(19)--加载本地图片 上一篇博客正好用到了本地的图片,记录一下用法: 首先新建一个文件夹,这个文件夹要跟目录下 然后在pubspec.yaml里面声明出 ...

  5. jQuery中的ready方法及实现按需加载css,js

    模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...

  6. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  7. 网站加载css/js/img等静态文件失败

    网站加载css/js/img等静态文件失败,报网站http服务器内部500错误.而服务器中静态文件存在且权限正常. 从浏览器中直接访问文件,出来乱码.这种问题原因在于iis中该网站mime配置报错,不 ...

  8. asp.net MVC发布iis无法加载css,js和图片

    今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual s ...

  9. 文字添加响应事件，js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

随机推荐

  1. UI 设计的整个工作流程是怎样的？

    作为一个专业UI设计师,不仅仅要了解整个产品在UI界面设计,交互设计中的工作流程,更需要了解整个产品从需求提出到产品上线的整个工作流程. 以下是互联网产品个部门的工作分配及流程: 从图中可以看到,一个 ...

  2. ipcam

    ipcam也叫ip network camera,就是基于internet protocol的网络摄像机,同普通摄像头或者网眼的主要区别是ipcam实际上是一台视频服务器和摄像头的集成.ipcam只要 ...

  3. AutoCAD开发5--批量修改dwg文件

    Dim files, path, filename path = ThisDrawing.Utility.GetString(True, "输入dwg文件所在路径:") 'dwg文 ...

  4. 深入理解JVM(二)Java内存区域

    2.1 C.C++内存管理是由开发人员管理,而Java则交给了JVM进行自动管理 2.2 JVM运行时数据区:方法区.堆(运行时线程共享),虚拟机栈.本地方法栈.程序计数器(运行时线程隔离,私有) 1 ...

  5. 安装bazel（syntaxnet依赖工具）

    1.简介   Bazel是一个类似于Make的工具,是Google为其内部软件开发的特点量身定制的工具,如今Google使用它来构建内部大多数的软件.它的功能有诸多亮点: 多语言支持:目前Bazel默 ...

  6. 《Linux就该这么学》第八天课程

        当一个人的心中,有着更高的山峰想要去攀登时,他就不会在意脚下的泥沼. 今天发一下干货,常用命令的一些总结,今天的理论知识比较多. 原创地址:https://www.linuxprobe.com ...

  7. ActiveMQ_2安装

    Linux安装 环境JDK7以上 gz文件拷贝到 /usr/local/目录下 解压 后缀为 .tar.gz的压缩包 进入解压后的文件夹 cd apache-activemq-x.xx.x/ cd b ...

  8. TJOI2018 简要题解

    数学计算 用线段树记录之前乘过的每一个数,作除法时把原本的乘数改成111即可. 代码: #include<bits/stdc++.h> #define lc (p<<1) #d ...

  9. 将json对象转化成jsonp对象

    这个Demo用来检查是否具有唯一性 //检查 /user/check/{param}/{type} @RequestMapping("/check/{param}/{type}") ...

  10. Word中带圈数字

    写论文时常常要求输入带圈数字,先在Word中输入代码,选中代码后按Alt+X(然后再粘贴到Excel中) 符号 代码⓪ 24ea① 2460② 2461③ 2462④ 2463⑤ 2464⑥ 2465 ...