Django显示图片

使用django实现网页的时候,想要在网页上显示图片是一件比较麻烦的事情。标准的html语言显示图片的方法在这里行不通,需要在配置文件中稍作修改。

那么我们可以非常自然想到,网页上的图片的来源方式有两种。1种是静态图片,即在写网页的时候就确定好页面上要放那一张图片。1种是动态图片,如从数据库中的查询得到的图片。这两种显示图片的方式稍有不同,以下分两个部分进行说明。

写在前面:我在做的是django是1.8的版本号,在ubuntu环境下写的。

一、静态图片

假设我们现在已经有了一个可运行的网站,网站的结构如下所示:

.
├── db.sqlite3
├── image
│   ├── admin.py
│   ├── __init__.py
│   ├── migrations
│   │   ├── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── index.html
│   ├── tests.py
│   ├── urls.py
│   ├── views.py
├── manage.py
├── showImg
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
└── static
    └── 1.jpg

从上述结构可以看出,这个项目的名字叫做“showImg”,而APP的名字叫做“image”。至于其他各个文件的作用我就不再一一赘述,如果对这些文件还不是很明白的话,建议可以先从基本的入手。

在我们的主页面中,index.html文件希望现实static文件夹下面的这个图片,目前index.html的内容如下:

<!-- index.html --><html>
<head><head>
<body>
    <h1>An Image Test</h1>
    <img src="/static/1.jpg">
</body>
</html>

按照传统的理解,这个时候图片是可以现实的,但在django中,图片显示的是一个“×”,图片无法显示出来。

这是因为按照django处理链接的习惯,每次django遇到一个链接,都会到urls.py中寻找相应的解决方案。而urls.py中也给出各个链接对应的views.py文件中的处理函数,所以这个时候我们需要修改urls.py文件。当然,这个urls.py文件是image文件夹下的,而不是showImg文件夹下的。

# ./image/urls.pyfrom django.conf.urls import patterns, url
from image import views

urlpatterns = patterns(‘‘,
         url(r‘^$‘, views.show, name=‘index‘),
         url(r‘^static/(?P<path>.*)‘, ‘django.views.static.serve‘, {‘document_root‘:‘/home/anna/Documents/django_py/showImg/static‘}),
         )              

标红的内容就是要新添加的一行说明,告诉django,当遇到一个“static”开头的链接时,改如何处理。

这个时候,再访问http://127.0.0.1:8000/image/ 发现,图片还是无法显示,我们还需要小小的修改一下index.html中的内容

<!-- index.html -->
<html>
<head><head>
<body>
    <h1>An Image Test</h1>
    <img src="static/1.jpg">
</body>
</html>

这个地方和前面的代码有什么不同呢?就是图片路径不在是绝对路径而是相对路径了(呃,其实我也不知道为什么,我也是尝试了好久才发现应该是这个样子的。恩。)

这个时候再访问http://127.0.0.1:8000/image/就没问题啦!

然后我们又会有一个问题,我习惯把图片放在别的目录下面,放在根目录的static下面不符合我的习惯。这个时候再要修改,也就是非常方便的事情了。

.
├── db.sqlite3
├── image
│   ├── admin.py
│   ├── __init__.py
│   ├── migrations
│   │   ├── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── index.html
│   ├── pic
│   │   └── 1.jpg
│   ├── tests.py
│   ├── urls.py
│   ├── views.py
├── manage.py
├── showImg
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
└── static
    └── 1.jpg

比如说将图片放在image/pic/目录下,那么这个是我们首先修改urls.py文件的内容。

# ./image/urls.py
from django.conf.urls import patterns, url
from image import views

urlpatterns = patterns(‘‘,
         url(r‘^$‘, views.show, name=‘index‘),
         url(r‘^image/pic/(?P<path>.*)‘, ‘django.views.static.serve‘, {‘document_root‘:‘/home/anna/Documents/django_py/showImg/image/pic‘}),
         ) 

注意到绿色高亮的部分,就是把原先的“static”全部都换成了新的路径。相应的,index.html文件也是一样的处理方式。

<!-- index.html -->
<html>
<head><head>
<body>
    <h1>An Image Test</h1>
    <img src="image/pic/1.jpg">
</body>
</html>

这样再访问http://127.0.0.1:8000/image/就也可以了

当然,所谓一样通样样通,万变不离其宗,为了保证接口的一致性,我们也可以保留static关键字,而只修改图片的位置。这个时候的代码如下:

# ./image/urls.py
from django.conf.urls import patterns, url
from image import views

urlpatterns = patterns(‘‘,
         url(r‘^$‘, views.show, name=‘index‘),
         url(r‘^static/(?P<path>.*)‘, ‘django.views.static.serve‘, {‘document_root‘:‘/home/anna/Documents/django_py/showImg/image/pic‘}),
         ) 
<!-- index.html -->
<html>
<head><head>
<body>
    <h1>An Image Test</h1>
    <img src="static/1.jpg">
</body>
</html>

发现其中的不同了吗?这样也是可以的哦。

=========================

上面的方法基本可以满足我们的需要啦,但是因为种种原因,我们选择另一种方法来解决这个问题。

还是从最基本的说起,项目结构如下,图片在static文件夹下。

.
├── db.sqlite3
├── image
│   ├── admin.py
│   ├── __init__.py
│   ├── migrations
│   │   ├── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── index.html
│   ├── tests.py
│   ├── urls.py
│   ├── views.py
├── manage.py
├── showImg
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
└── static
    └── 1.jpg

首先需要在showImg/settings.py文件中加一句话

# showImg/settings.pySTATIC_URL = ‘/static/‘
STATICFILES_DIRS = (
     os.path.join(BASE_DIR, ‘static‘).replace(‘\\‘, ‘/‘),
)

红色的就是添加的话,不用做任何改动(前提是图片在static文件夹下)。然后再修改index.html的内容:

<!-- index.html -->
<html>
<head><head>
<body>
    <h1>An Image Test</h1>   {% load staticfiles %}
    <img src="{% static"1.jpg"%}">
</body>
</html>

着重要修改的内容如红色高亮。这里需要注意的是,img的src的内容中,1.jpg的前后是不能要空格的,否则图片的路径将会是错误的。

<img src="{% static"1.jpg "%}">

比如上述代码,这样的图片路径是有错误的。

如果大家发现图片无法显示的话,可以用“审查元素”看一下图片的路径是否正确,正确的图片路径应该是:

<img src="/static/1.jpg">

相应的,如果大家不习惯把图片的内容放到static文件夹下面的话,这里只用改一处就可以了:

# showImg/settings.py
STATIC_URL = ‘/static/‘
STATICFILES_DIRS = (
     os.path.join(BASE_DIR, ‘image/pic‘).replace(‘\\‘, ‘/‘),
)

然后在index.html文件中,还是使用static来访问图片。

好了,大致就是这样的。关于动态的图片显示我也还没有看。做完了再补充。

Bon Appetite!

时间: 2024-12-28 20:55:22

Django显示图片的相关文章

Django上传并显示图片

Django上传并显示图片 非常详细的教程,教大家一步步用Django上传与显示图片.用例子学习是一个不错的方法,下面我用一个非常简单的例子为大家讲解Django中图片的上传与显示. 1. 创建名称为'a'的项目 1 $django-admin startproject a 2.在项目'a'中创建名为'b'的app 12 $cd a$python manage.py startapp b 3.把b加入到settings.py中的INSTALLED_APPS中 123456789 INSTALLE

django实现图片上传和显示

首先安装pillow模块 在models.py下设置 class Notices(models.Model): NoticeCategory=models.CharField(max_length=10,default='') #新闻分类 NoticeImagePath=models.ImageField(upload_to='img') 这里的upload_to是指将图片存放在哪个位置 在views.py中设置获取图片的方法 def index(request): Notice_list =

django1.8中如何显示图片

在django中将图片.javascript.css称为静态文件.如何将这些静态文件显示在django中呢?近期做一个项目,一直困扰着我,后来查找各种资源,终于在官方文档中找到. 官方文档链接 在setting.py文件中进行修改 1INSTALLED_APPS 中要有 django.contrib.staticfiles 2要设置静态文件查找目录 STATIC_URL = '/static/' 或者: STATICFILES_DIRS = [ os.path.join(BASE_DIR, "s

Django实现图片验证码

Django中图片验证码的实现 效果图: 实现思路: 注册页面提供验证码输入标签: <label>图形验证码:</label> <input type="text" name="pic_code" id="pic_code" v-model="image_code" @blur="check_image_code"> <img :src="image_co

Qt 显示图片 放大 缩小 移动(都是QT直接提供的功能)

本文章原创于www.yafeilinux.com 转载请注明出处. 现在我们来实现在窗口上显示图片,并学习怎样将图片进行平移,缩放,旋转和扭曲.这里我们是利用QPixmap类来实现图片显示的. 一.利用QPixmap显示图片. 1.将以前的工程文件夹进行复制备份,我们这里将工程文件夹改名为painter05.(以前已经说过,经常备份工程目录,是个很好的习惯) 2.在工程文件夹的debug文件夹中新建文件夹,我这里命名为images,用来存放要用的图片.我这里放了一张linux.jpg的图片.如下

jquery html5 file 上传图片显示图片

最近做了一个小例子,在上传用户图像时,如何在上传图片时显示图片.在网上找了很多资料也未能如愿,如是,就用jquery ,html5,实现了,由于开发是在linux 所以未能在ie下测试,在forefox,chrom下是可以的. 一.html下的代码是: <div class=' input_box' > <span class='spac' >头</span>相:<input class="input_style" id="'head

Android TextView里直接显示图片的三种方法

方法一:重写TextView的onDraw方法,也挺直观就是不太好控制显示完图片后再显示字体所占空间的位置关系.一般如果字体是在图片上重叠的推荐这样写.时间关系,这个不付源码了. 方法二:利用TextView支持部分Html的特性,直接用api赋图片.代码如下: //第一种方法在TextView中显示图片 String html = "<img src='" + R.drawable.circle + "'/>"; ImageGetter imgGett

可以显示图片的类似网易新闻的头部滚动条(转)

声明:原文来自  http://www.jianshu.com/p/ce4909bc4752 前言, 最近发现一类效果类似网易新闻头部滚动条的效果,不过是可以显示图片(上, 中, 左, 右)和文字, 最近在比较闲的时候顺带把这些效果也一并实现了, 那么这一类的各种效果大致上就实现了Demo地址,供有需要的朋友可以参考 增加效果 图片在左边 图片在右边.gif 图片在上面.gif 只显示图片.gif 原来的效果 --- 只显示文字 oc版滚动示例.gif 关于实现部分, 新增显示的图片的效果, 其

C++开发人脸性别识别教程(9)——搭建MFC框架之显示图片

在之前的博客中我们已经实现读取用户选定的文件夹,并将其路径保存在相应的变量中,在这篇博文中我们将介绍如何借助CvvImage类将图片显示在picture控件中,并自动读取文件夹下的其他图片. 一.添加“下一张”按钮 由于我们需要读取文件夹下的所有图像文件,而非某一张文件,因此有必要添加一个按钮来进行控制,具体功能就是:每单击一次这个按钮,程序就会自动读取下一张图片并显示在界面上.由于之前已经详细介绍了MFC中添加Button控件的方式,这里不再赘述.添加一个按钮,命名为“下一张”,将ID更改为I