django1.8中如何显示图片,应用css样式,javascript事件
2016-05-19 19:30
459 查看
在django中将图片、javascript、css称为静态文件。如何将这些静态文件显示在django中呢?近期做一个项目,一直困扰着我,后来查找各种资源,终于在官方文档中找到。
官方文档链接
在setting.py文件中进行修改
1
2要设置静态文件查找目录
或者:
3在模版template中,使用静态文件连接时要么硬编码,例如:“/static/img/myexample.jpg”
注意:静态文件需要放在STATICFILES_DIRS声明的文件夹里。比如我的目录结构如下
要么使用static模版标签,例如:
4存储静态文件在静态文件目录中
要么在每个app目录下,新建一个static文件夹,把静态文件放到其中。例如:在app1包里有static/img/myexample.jpg与之相关的设置就是在setting.py文件中设置
要么将所有的静态文件放到一个公共的地方,方便对其管理和共享。例如:在manage.py同级目录下新建一个static文件夹,在这个文件夹下在建一个img文件夹,里面有myexample.jpg文件。在与之相关的设置是
django系统会首先在STATICFILES_DIRS中查找所需的静态文件,然后在STATIC_URL中查找,如果有同名的文件,会返回第一个找到的文件。
二、我的一个例子:
setting.py文件下
static文件结构如下
在template文件中有如下片段:
{% block content %}
<div>
{% load static %}
<p>
<a href="/app1/index/"><img src="{% static "img/success1.jpg" %}" alt="My image" height="600px" width=auto/></a>
</p>
</div>
{% endblock %}
下面是实验效果
官方文档链接
在setting.py文件中进行修改
1
INSTALLED_APPS 中要有django.contrib.staticfiles
2要设置静态文件查找目录
STATIC_URL = '/static/'
或者:
STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), ]
3在模版template中,使用静态文件连接时要么硬编码,例如:“/static/img/myexample.jpg”
注意:静态文件需要放在STATICFILES_DIRS声明的文件夹里。比如我的目录结构如下
要么使用static模版标签,例如:
{% load static %} <img src="{% static "img/myexample.jpg" %}" alt="My image"/>
4存储静态文件在静态文件目录中
要么在每个app目录下,新建一个static文件夹,把静态文件放到其中。例如:在app1包里有static/img/myexample.jpg与之相关的设置就是在setting.py文件中设置
STATIC_URL = '/static/'
要么将所有的静态文件放到一个公共的地方,方便对其管理和共享。例如:在manage.py同级目录下新建一个static文件夹,在这个文件夹下在建一个img文件夹,里面有myexample.jpg文件。在与之相关的设置是
STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), ]
django系统会首先在STATICFILES_DIRS中查找所需的静态文件,然后在STATIC_URL中查找,如果有同名的文件,会返回第一个找到的文件。
二、我的一个例子:
setting.py文件下
STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR,'static'), )
static文件结构如下
在template文件中有如下片段:
{% block content %}
<div>
{% load static %}
<p>
<a href="/app1/index/"><img src="{% static "img/success1.jpg" %}" alt="My image" height="600px" width=auto/></a>
</p>
</div>
{% endblock %}
下面是实验效果
相关文章推荐
- json总结
- js总结1
- javascript的理解及经典案例
- java解析JavaScript片段
- JSP的动作元素
- Jsp——response对象
- js 获取页面高度和宽度兼容 ie firefox chrome等
- JS操作iframe里的DOM || contentWindow,contentDocument
- <JS>显示和基本操作
- 基础级 - sweetAlert
- javascript语言精粹
- JS 创建 Map
- javascript之debounce函数
- javascript数组去重的四种方法
- js 从一个select选择数据添加到另一个select(包括移除)
- js input绑定enter回车键事件
- JsonMode json嵌套解析
- jsp页面div浮动弹出
- js 中 foreach循环(for in)中,最后会多出一个值
- 关于js的时间对象常用方法