Django顯示圖片

標籤：style   blog   http   color   os   使用   io   檔案   ar   

使用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.py
from django.conf.urls import patterns, urlfrom 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.pyfrom django.conf.urls import patterns, urlfrom 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.pyfrom django.conf.urls import patterns, urlfrom 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.pySTATIC_URL = ‘/static/‘STATICFILES_DIRS = (     os.path.join(BASE_DIR, ‘image/pic‘).replace(‘\\‘, ‘/‘),)

然後在index.html檔案中，還是使用static來訪問圖片。

好了，大致就是這樣的。關於動態圖片顯示我也還沒有看。做完了再補充。

 

 

 

 

 

 

 

 

Bon Appetite！

Django顯示圖片