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

  1. 在imge控件中直接显示图片(图片是byte[]格式)

    在工作过程中遇到了这个问题,在网上查了一些资料,结合自己的解决方法及解决过程总结了下,方面以后查阅.如果能帮到同样遇到这个问题的你,将非常高兴哦~_~ 由于asp.net中的Image控件是在Syst ...

  2. js控制不同的时间段显示不同的css样式

    js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){        datetoday ...

  3. QT中循环显示图片和简单的显示图片

    请关注我的github https://github.com/linqiaozhou 以下实例代码不久后将会上传到我的github 这是我最近一个项目中的部分代码 //以下是简单的在QT中显示图片的代 ...

  4. tp3.2替换模板中如果需要替换的图片在css样式表中怎么办?

    因为标签中的 style 定义的样式可直接覆盖 css样式表中定义的样式,所以可以在要替换的标签中用 style 直接定义样式,具体代码如下: <div class="aboutbg& ...

  5. Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer

    问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...

  6. 后端数据中含有html标签和css样式,前端如何转译展示样式效果。

    后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...

  7. 8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件

    HTML DOM(Document Object Model)文档对象模型 当网页被加载时,浏览器会创建页面的文档对象模型. HTMLDOM 定义了用于HTML的一系列标准的对象.通过DOM,你可以访 ...

  8. jsp网页在浏览器中不显示图片_eclipse环境下配置tomcat中jsp项目的虚拟路径

    遇到的问题是这种,在jsp网页中嵌入了本地的图片,由于会用到上传到服务器的图片,所以没有放到项目里面,而是把全部图片单独放到一个文件夹里,然后打算使用绝对路径把要显示的图片显示出来.比方是放在了E盘的 ...

  9. 关于KindEditor编辑器,word文档中的图文全选粘贴,在编辑器中不显示图片的问题

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...

随机推荐

  1. Adobe Dynamic Http Streaming的简单配置与实现 (FMS, HLS, HDS)

    http://blog.csdn.net/avsuper/article/details/7663879 Adobe的Http Dynamic Streaming是针对苹果的HLS方案提出基于HTTP ...

  2. 使用RunWith注解改变JUnit的默认执行类,并实现自已的Listener

    使用RunWith注解改变JUnit的默认执行类,并实现自已的Listener在平时的单元测试,如果不使用RunWith注解,那么JUnit将会采用默认的执行类Suite执行,如下类: public  ...

  3. 发现linux shell中$0,$?,$!等的特殊用法

    记录下linux shell下的特殊用法及参数的说明 变量说明: $$ Shell本身的PID(ProcessID) $! Shell最后运行的后台Process的PID $? 最后运行的命令的结束代 ...

  4. 对UserDict的研究

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #对UserDict的研究 class UserDict(): def __init__(self, dict ...

  5. CAS 5.1.x 的搭建和使用(三)—— 通过官方示例来熟悉客户端搭建

    CAS单点登录系列: CAS 5.1.x 的搭建和使用(一)—— 通过Overlay搭建服务端 CAS5.1.x 的搭建和使用(二)—— 通过Overlay搭建服务端-其它配置说明 CAS5.1.x ...

  6. openssl的证书格式转换

    证书转换 PKCS 全称是 Public-Key Cryptography Standards ,是由 RSA 实验室与其它安全系统开发商为促进公钥密码的发展而制订的一系列标准,PKCS 目前共发布过 ...

  7. yum插件yum-fastestmirror

    yum多个mirror自动选择速度最快的mirror,yum-fastestmirror插件,它会自动选择最快的mirror 配置文件: /etc/yum/pluginconf.d/fastestmi ...

  8. WiFi共享精灵与路由器

    路由器是大家都知晓的.WiFi共享精灵如今也是非常多人在用的. 那么非常多人就有疑问了,都有路由器了,还要WiFi共享精灵干嘛? 我们来比較一下两者的差别. 首先两个都是能够实现共享上网的. 就是两个 ...

  9. Swift调用OC和C

    Swift文件:main.swift import Foundation //Swift调用C函数 desc1() //Swift调用OC //拿到OC类 var funcClass = Root() ...

  10. 【laravel5.4】自定义公共函数的创建

    原文地址:http://blog.csdn.net/qq_38125058/article/details/76862151 公共函数,简单来说就是在任何地方都可以直接使用这个函数.简单介绍两种实现方 ...