Django顯示圖片

時間  2019-11-18
標籤 django 顯示 圖片 欄目 Python 简体版
原文   原文鏈接

使用django實現網頁的時候，想要在網頁上顯示圖片是一件比較麻煩的事情。標準的html語言顯示圖片的方法在這裏行不通，須要在配置文件中稍做修改。html

那麼咱們能夠很是天然想到，網頁上的圖片的來源方式有兩種。1種是靜態圖片，即在寫網頁的時候就肯定好頁面上要放那一張圖片。1種是動態圖片，如從數據庫中的查詢獲得的圖片。這兩種顯示圖片的方式稍有不一樣，如下分兩個部分進行說明。sql

寫在前面：我在作的是django是1.8的版本號，在ubuntu環境下寫的。數據庫

1、靜態圖片django

假設咱們如今已經有了一個可運行的網站，網站的結構以下所示：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中，圖片顯示的是一個「×」，圖片沒法顯示出來。url

這是由於按照django處理連接的習慣，每次django遇到一個連接，都會到urls.py中尋找相應的解決方案。而urls.py中也給出各個連接對應的views.py文件中的處理函數，因此這個時候咱們須要修改urls.py文件。固然，這個urls.py文件是image文件夾下的，而不是showImg文件夾下的。spa

# ./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/static'}),
         )

標紅的內容就是要新添加的一行說明，告訴django，當遇到一個「static」開頭的連接時，改如何處理。.net

這個時候，再訪問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.py
STATIC_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來訪問圖片。

 

2、動態圖片

動態圖片的處理過程與靜態圖片沒有根本上的區別。咱們仍是承接上面的例子來思考，若是用戶上傳的動態圖片就是存儲在/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

如今咱們假設前面的靜態圖片的目的已經成功了，只不過如今新添加了一個功能，是上傳圖片，並將圖片存儲在/static文件夾下。

這時候咱們天然想到，要將上傳的圖片顯示到網頁上，首先要從視圖層（views.py）中將要顯示的圖片信息傳給網頁，假設圖片信息是圖片名稱，即本例中的「1.jpg」，那麼views.py的部分代碼爲：

# views.py

return render_to_response('index.html', {'images':'1.jpg'})

當把要顯示的圖片傳遞給網頁後，index.html的代碼就有所改變了：

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

改變只如紅色高亮部分，將原來的具體的圖片名稱改爲了傳遞過來的內容指代。固然，若是在views.py中傳遞過來的圖片不僅1張的話，即：

# views.py

return render_to_response('index.html', {'images':['1.jpg', '2.jpg']})

如上述代碼，傳遞的是一個list，index.html採用上面的代碼是沒法正確顯示出圖片的。經過審查元素看到的圖片的url是亂碼，這個時候咱們就要循環顯示圖片了：

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

這個時候必須如上述代碼中循環顯示圖片才能正確顯示。

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

好了，到這裏咱們已經分別講述瞭如何顯示靜態和動態的圖片了。可是若是當一個網站裏面同時包含靜態和動態的圖片的話，就仍是須要使用不一樣的指代方式——「static」和「media」。static的內容咱們已經講過了，若是是動態圖片的話，media如何使用：

# settings.py
MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace('\\','/')
MEDIA_URL = '/media'

在settings.py中加入如上內容。而後修改online/models.py中的內容，將上傳的圖片顯示到media文件夾下

# online/models.py

class Image(models.Model):
    headImg = models.FileField(upload_to = '.')

其中標紅處的文件路徑是比較關鍵的。這裏只寫一個當前路徑，而再也不寫文件夾的名稱，是由於在settings.py文件中已經指定了上傳文件的位置，就是在/media 文件夾下，因此這裏不用再指定了。若是在這裏寫成

# online/models.py

class Image(models.Model):
    headImg = models.FileField(upload_to = './media')

就會發現，上傳的圖片實際上是保存在/media/media文件夾下面的。

這時，再將圖片信息傳遞給頁面，讓頁面顯示，就能夠了：

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

注意，這裏依然用static做爲關鍵字，而不由於是動態文件就用media之類的。

 

 

 

 

 

 

 

 

 

Bon Appetite！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程