django1.8中如何显示图片,应用css样式,javascript事件
在django中将图片、javascript、css称为静态文件。如何将这些静态文件显示在django中呢?近期做一个项目,一直困扰着我,后来查找各种资源,终于在官方文档中找到。
在setting.py文件中进行修改
1INSTALLED_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 %}
下面是实验效果

django1.8中如何显示图片,应用css样式,javascript事件的更多相关文章
- 在imge控件中直接显示图片(图片是byte[]格式)
在工作过程中遇到了这个问题,在网上查了一些资料,结合自己的解决方法及解决过程总结了下,方面以后查阅.如果能帮到同样遇到这个问题的你,将非常高兴哦~_~ 由于asp.net中的Image控件是在Syst ...
- js控制不同的时间段显示不同的css样式
js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){ datetoday ...
- QT中循环显示图片和简单的显示图片
请关注我的github https://github.com/linqiaozhou 以下实例代码不久后将会上传到我的github 这是我最近一个项目中的部分代码 //以下是简单的在QT中显示图片的代 ...
- tp3.2替换模板中如果需要替换的图片在css样式表中怎么办?
因为标签中的 style 定义的样式可直接覆盖 css样式表中定义的样式,所以可以在要替换的标签中用 style 直接定义样式,具体代码如下: <div class="aboutbg& ...
- Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer
问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...
- 后端数据中含有html标签和css样式,前端如何转译展示样式效果。
后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...
- 8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件
HTML DOM(Document Object Model)文档对象模型 当网页被加载时,浏览器会创建页面的文档对象模型. HTMLDOM 定义了用于HTML的一系列标准的对象.通过DOM,你可以访 ...
- jsp网页在浏览器中不显示图片_eclipse环境下配置tomcat中jsp项目的虚拟路径
遇到的问题是这种,在jsp网页中嵌入了本地的图片,由于会用到上传到服务器的图片,所以没有放到项目里面,而是把全部图片单独放到一个文件夹里,然后打算使用绝对路径把要显示的图片显示出来.比方是放在了E盘的 ...
- 关于KindEditor编辑器,word文档中的图文全选粘贴,在编辑器中不显示图片的问题
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
随机推荐
- Asp.net 恢复页面内用户控件内的控件ClientID
众所周知在Asp.net中如果一个页面添加了一个用户控件(或母版页),那么用户控件内的控件的 ClientID号会被自动添加页面中用户控件的ClientID 即页面中的控件内的控件ClientID ...
- 微信小程序价值思考:手机端的CS-BS迁移
从很多特点来看,小程序都非常类似于网页:主要的业务逻辑在服务端.客户端无需安装应用程序.小程序的开发采用的HTML+JS+CSS技术等等.张小龙自己对小程序的定位也大概如此:无意做小程序分发平台,只是 ...
- X86-64寄存器和栈帧
简介 通用寄存器可用于传送和暂存数据,也可参与算术逻辑运算,并保存运算结果.除此之外,它们还各自具有一些特殊功能.通用寄存器的长度取决于机器字长,汇编语言程序员必须熟悉每个寄存器的一般用途和特殊用途, ...
- iOS开发系列课程预告
近期在Mac和iOS上做开发,认为应该写一点东西分享给感兴趣的童鞋们.在此之前.以前有非常多同行们都在埋怨苹果Objective-C的复杂和难以上手,为此也有非常多人对今年(2014年)刚推出的Swi ...
- 使用Yii 1.1框架搭建第一个web应用程序
我已经安装好了WampServer,web项目根目录是 D:\wamp\www. 1.下载Yii 1.1的源码 yii-1.1.14.f0fee9.tar.gz: 2.解压源码包,放在web项目的根目 ...
- curl库的使用,32-64
http 使用curl发起https请求 http://www.cnblogs.com/ainiaa/archive/2011/11/08/2241385.html Curl配置及编译: CFLAGS ...
- 转:Python模块学习 ---- httplib HTTP协议客户端实现
httplib 是 python中http 协议的客户端实现,可以使用该模块来与 HTTP 服务器进行交互.httplib的内容不是很多,也比较简单.以下是一个非常简单的例子,使用httplib获取g ...
- KNOCKOUTJS DOCUMENTATION-绑定(BINDINGS)-自定义绑定
除了ko内建的绑定,还可以自定义绑定,灵活地封装复杂的行为使之可重用. 自定义绑定 注册自定义绑定 向 ko.bindingHandles添加一个子属性来注册一个绑定. ko.bindingHandl ...
- SpringMVC之ModelAndView的用法(转)
原文地址:https://blog.csdn.net/qq30211478/article/details/78016155 (一)使用ModelAndView类用来存储处理完后的结果数据,以及显示该 ...
- Tomcat 配置加密的服务器连接器
先查询API,找到Configuration里面的Connector的HTTP中的SSL(加密连接器) SSL abbr. Security Socket Layer 加密套接字协议层 利用已生成 ...