解决django关于图片无法显示的问题
http://python.usyiyi.cn/django/index.html
http://m.blog.csdn.net/blog/qingyuanluofeng/44877399
http://www.idjango.com/content/15/
[原]手把手教你:解决django关于图片无法显示的问题
2015-4-4阅读177 评论1
先聊聊吧,作为一名程序猿,最近在一个人在帮企业写网站,用的架构呢,是:mongodb + python + django + html。之前搞网页,图片,css文件,js文件的路径是直接相对于***.html文件的,没想到等到真正要部署到 django的服务器上,所有的图片全部无法显示。css文件和js文件同样没有效果。
搞了两三天,终于解决了这个问题。
程序猿容易吗?不容易,总是被各种小问题被捆住了手脚,而没有把真正的精力用在:算法,并发,大数据 处理,内存优化这些问题上,总是被大多数人经历的小问题再次重复经历,这是一条老路。
我的想法就是:通过几分钟告诉你问题的原因和解决方法,让一个可能在你身上需要几天解决的问题,几分钟解决,把精力花在一个程序猿应该花的身上。如果觉得好,不妨不要吝啬您的一两句评论。
只有程序猿才能理解程序猿是多么的。。。
原因:django部署方式比较特别,采用静态文件路径:STATICFILES_DIRS的部署方式,之前你写的相对路径,绝对路径因为缺少静态文件路径而全部失效
解决方法:
步骤1:在settings.py文件的最后加上以下内容:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(os.path.dirname(__file__),'static')
# 设置图片等静态文件的路径
STATICFILES_DIRS = (
('css',os.path.join(STATIC_ROOT,'css').replace('\\','/') ),
('js',os.path.join(STATIC_ROOT,'js').replace('\\','/') ),
('images',os.path.join(STATIC_ROOT,'images').replace('\\','/') ),
('upload',os.path.join(STATIC_ROOT,'upload').replace('\\','/') ),
)
步骤2:在urls.py文件的开头第一行和第二行分别加上以下内容:
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.contrib import staticfiles
在urls.py文件最后加上以下内容:
#设置静态文件路径
urlpatterns += staticfiles_urlpatterns()
步骤3:设置静态文件的目录,很关键
整个文件的目录结构如下
project---project
---app
|
----static
|
-----templates
你的static和templates处于同级目录,然后将你的images,css,js文件夹放在static目录下面
测试:在你模板,也就是html文件中
<p><img src="/static/images/bg_information.png.png" width="980" height="180"></p>
改成自己的图片名称,注意图片前缀:/static/images/ 别写成 static/images/ 这样会无法显示
大功告成,嗨起来。
解决django关于图片无法显示的问题的更多相关文章
- 【Web】解决简书图片不显示问题“系统维护中,图片暂时无法加载”
简书不显示图片的解决方法 首次编辑于2019-6-6 最近几天在浏览简书上的文章时,发现图片显示不出来,提示"系统维护中,图片暂时无法加载". 猜测应该是简书由于某种原因暂时屏蔽了 ...
- 解决css引用图片不显示问题:background-image: url(../image/document.png);
.icon-document { background-image: url(../image/document.png); display:block; float: left; width: 25 ...
- 解决WPF导入图片不显示的问题
想在XAML中使用一张图片,得先将其添加到工程中, 方法是: 在项目中双击Resources.resx,选择图像,在添加资源的下拉菜单中选择添加现有文件,然后选择文件,添加图片进来后可以在Resour ...
- Django关于图片验证码显示笔记
.访问页面 /login/ - 内部需要创建一张图片,并且给用户返回 - 创建一个白板 Session存放验证码 .POST - 根据用户提交的数据与session里面比较 .登录界面 和 验证码 分 ...
- django中图片的上传和显示
上传图片实际上是 把图片存在服务器的硬盘中,将图片存储的路径存在数据库中. 1 首先要配置文件上传的路径: 1.1 建立静态文件目录 在项目根目录下 新建一个 static文件夹,下面再建立一个med ...
- ecshop验证码图片无法显示终极解决办法
ecshop验证码图片无法显示终极解决办法 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2014-06-06 客户在安装好ecshop之后所有前台的证码不显示,后 ...
- 解决ueditor编辑器图片在线管理图片无法显示
使用ueditor,点击在线管理,服务器图片路径显示不正确,如下图所示 查看源码,如下: 发现图片src中中间多了一长串的项目跟路径,解决的办法是 把 jsp/controller.jsp 里面 ...
- python 1: 解决linux系统下python中的matplotlib模块内的pyplot输出图片不能显示中文的问题
问题: 我在ubuntu14.04下用python中的matplotlib模块内的pyplot输出图片不能显示中文,怎么解决呢? 解决: 1.指定默认编码为UTF-8: 在python代码开头加入如下 ...
- django上传并显示图片
环境 python 3.5 django 1.10.6 步骤 创建名为 testupload的项目 django-admin startproject testupload 在项目testupload ...
随机推荐
- 数学函数类方法的使用.java
public class Test { public static void main(String[] args) { double a=2,b=3; double z1=Math.pow(a,b) ...
- Mediawiki.org的PHP编码约定
http://www.mediawiki.org/wiki/Manual:Coding_conventions/PHP assignment作为expression来用看起来像个错误(looks su ...
- Flask学习记录之Flask-WTF
Flask-wtf时Wtforms库的flask框架扩展,能够方便的处理Web表单 一.定义一个web表单 使用flask-wtf时,每个web表单都由一个继承自flask.ext.wtf.Form的 ...
- cygwin编译SDL1.2
1.下载了一个SDL-1.2.14.tar.gz 2.下载一个cygwin64对SDL-1.2.14.tar.gz解压 tar -zxvf SDL-1.2.14.tar.gz 在网上找的大概是需要需要 ...
- JavaWeb学习笔记--4.EL表达式
四. 表达式语言(相当于对JSP中对象输出的简化,功能实质上类似) 转自ZHSJUN的博客 http://blog.csdn.net/zhsjun/article/details/2254546 表达 ...
- 布局共享(列如所有activity拥有相同的布局部分,比如actionbar,在BaseActivity中写入布局)
有时候界面上会用到统一的布局,比如toolbar,你可能会想到在用到的地方都去加上toobar这样对于程序的开发与维护来说都显得特别麻烦,我们可以将他写在父类中. 首先创建一个BaseActivity ...
- java实现双向链表
PS:双向链表(每个节点含有指向前一个节点的前驱与后一个节点的后继) public class DoublyLinkedList { static class Node { private Objec ...
- LeetCode_Combination Sum II
Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...
- bzoj1786
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1786 刚看上去觉得挺吓人的...... 冥冥之中我的内心深处告诉我填进去的数一定是非严格递增的 ...
- Android 通过外键连接两个数据库
Learn: 1.Android数据库的语法. 2.通过外键连接两个数据库. 3.加强了对数据库的熟悉度. 4.对文本框的visiblity属性的了解. Demo:http://pan.baidu.c ...