django 讀取圖片到頁(yè)面實(shí)例
首先,我們看看models.py里的模型,有個(gè)upload_to參數(shù),為了和過(guò)去一刀兩斷,樓主決定給upload_to賦值一個(gè)新的值叫avatar/,這個(gè)參數(shù)的意思是把文件上傳到MEDIA_ROOT/avatar/下面。
既然這里upload_to的值是連接在MEDIA_ROOT/路徑后的一部分,所以很自然的只能寫成avatar/或者./avatar/,而不能寫成/avatar/,樓主已經(jīng)以身試法過(guò)。
還有一點(diǎn),這里提到了MEDIA_ROOT,可是我們一直沒(méi)設(shè)置過(guò)啊。
headImg = models.FileField(upload_to='avatar/')
所以理所當(dāng)然的要設(shè)置MEDIA_ROOT,所以在settings.py中做如下設(shè)置,這里的意思就是說(shuō),我們?cè)陧?xiàng)目根目錄下會(huì)新建一個(gè)media文件夾,專門用來(lái)存放media文件。結(jié)合上面的設(shè)置可推出,我們上傳的文件會(huì)放在/media/avatar/下:
MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace("\\", "/")```
這`MEDIA_ROOT`就是媒體根目錄的路徑,這……好像是廢話。上傳的文件也會(huì)放在這里,但是正如我們上面探索時(shí)提到的:使用文件,實(shí)質(zhì)上也是調(diào)用了一個(gè)文件的url,在Django中提到url,都是要從`urlpatterns`中過(guò)濾一遍的。
所以,展示圖片的邏輯應(yīng)該是這樣的:我們調(diào)用圖片的url一般是有規(guī)律的,我們過(guò)濾的時(shí)候發(fā)現(xiàn),只要符合,就按照文件名從媒體根目錄中找相應(yīng)的文件。
- 所以,我們先找到圖片url的規(guī)律,都說(shuō)了,圖片都是存在`/media/avatar/`中,也就是說(shuō)圖片的路徑應(yīng)該是包含`/media/avatar/`的,為了保險(xiǎn)起見(jiàn)以及后續(xù)我們可能會(huì)存除了頭像之外的其他文件,比如儲(chǔ)存縮略圖的叫`/media/thumb/`,所以這里我們?nèi)〈蠹夜灿械腵/media/`作為過(guò)濾url的規(guī)律。
MEDIA_URL = '/media/'
- 這也就是為什么`MEDIA_ROOT`和`MEDIA_ROOT`經(jīng)常一起出現(xiàn),并且他們的有相同的值。
準(zhǔn)備好這些后,在`urlpatterns`中寫吧,這里寫的路由和普通的路由不一樣,因?yàn)槲覀冞@里的所有的媒體文件其實(shí)都是靜態(tài)文件的一部分,而且我們一般路由符合條件后是去執(zhí)行`views`中的某個(gè)函數(shù),這里卻是去某個(gè)文件夾中找文件,所以肯定寫法上是不同的,寫法是`static(如果符合這樣規(guī)律的url,就去這個(gè)目錄中找文件)`:
導(dǎo)入這兩個(gè)包
setting.py中
from django.conf import settings from django.conf.urls.static import static urlpatterns = [ ... ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)```
如果你之前在探索的時(shí)候經(jīng)常會(huì)看看瀏覽器會(huì)輸出什么錯(cuò)誤,你一般都是看到要么是404 error,要么就是500 error。為什么會(huì)出現(xiàn)404 error,就是因?yàn)槲覀兘o的圖片路徑?jīng)]有在urlpatterns中定義過(guò),所以Django在要展示圖片的時(shí)候,一看,咦,這什么鬼url,在urlpatterns中根本沒(méi)有對(duì)應(yīng)的可以查,所以是錯(cuò)誤的請(qǐng)求網(wǎng)址,返回404 error。在urlpatterns中添加之后,就不會(huì)有404 error了。
好了,我們還剩下最后一步,就是在img的src中填寫正確的圖片地址。我們之前說(shuō)了圖片是儲(chǔ)存在/media/avatar/下面的,所以圖片的路徑就是:
<img src="/media/{{user.headImg}}" alt=""/>
因?yàn)槲覀儍?chǔ)存在數(shù)據(jù)庫(kù)中的圖片路徑是upload_to的值和圖片名稱的拼接,比如下面的avatar/test_mini.jpg。
補(bǔ)充知識(shí):解決django的html無(wú)法加載圖片的問(wèn)題
html的代碼都是對(duì)的
但是django網(wǎng)頁(yè)加載不出圖片

這里來(lái)給大家演示一下,因?yàn)閟etting.py少了東西,無(wú)法查找圖片路徑

STATICFILES_DIRS=( os.path.join(BASE_DIR,'static'), )
補(bǔ)上這個(gè)代碼

html插入圖片很簡(jiǎn)單,我這里就舉個(gè)栗子
{% load static %} <body background="{% static 'imges/bg.png' %}"></body>
運(yùn)行一下

ok, nice!
以上這篇django 讀取圖片到頁(yè)面實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 詳解Django自定義圖片和文件上傳路徑(upload_to)的2種方式
- Django實(shí)現(xiàn)前臺(tái)上傳并顯示圖片功能
- Django實(shí)現(xiàn)后臺(tái)上傳并顯示圖片功能
- Django實(shí)現(xiàn)圖片上傳功能步驟解析
- Django {{ MEDIA_URL }}無(wú)法顯示圖片的解決方式
- Django 實(shí)現(xiàn)將圖片轉(zhuǎn)為Base64,然后使用json傳輸
- django中的圖片驗(yàn)證碼功能
- django項(xiàng)目登錄中使用圖片驗(yàn)證碼的實(shí)現(xiàn)方法
- Django 實(shí)現(xiàn)前端圖片壓縮功能的方法
- Django 實(shí)現(xiàn)圖片上傳和下載功能
相關(guān)文章
Python隨機(jī)生成數(shù)據(jù)后插入到PostgreSQL
本文主要介紹利用python的random庫(kù)生成隨機(jī)數(shù),然后插入到PostgreSQL數(shù)據(jù)庫(kù)中,有需要的可以參考學(xué)習(xí)。2016-07-07
Python中使用conda?install還是pip?install好
這篇文章主要給大家介紹了關(guān)于Python中使用conda?install還是pip?install好的相關(guān)資料,conda install 和 pip install 都是Python的包管理工具,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
Python3 itchat實(shí)現(xiàn)微信定時(shí)發(fā)送群消息的實(shí)例代碼
使用微信,定時(shí)往指定的微信群里發(fā)送指定信息。接下來(lái)通過(guò)本文給大家分享Python3 itchat實(shí)現(xiàn)微信定時(shí)發(fā)送群消息的實(shí)例代碼,需要的朋友可以參考下2019-07-07
簡(jiǎn)單的python協(xié)同過(guò)濾程序?qū)嵗a
這篇文章主要介紹了簡(jiǎn)單的python協(xié)同過(guò)濾程序,分享了相關(guān)代碼示例,小編覺(jué)得還是挺不錯(cuò)的,具有一定借鑒價(jià)值,需要的朋友可以參考下2018-01-01
pytorch 實(shí)現(xiàn)刪除tensor中的指定行列
今天小編就為大家分享一篇pytorch 實(shí)現(xiàn)刪除tensor中的指定行列,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-01-01
python網(wǎng)絡(luò)編程之?dāng)?shù)據(jù)傳輸U(kuò)DP實(shí)例分析
這篇文章主要介紹了python網(wǎng)絡(luò)編程之?dāng)?shù)據(jù)傳輸U(kuò)DP實(shí)現(xiàn)方法,實(shí)例分析了Python基于UDP協(xié)議的數(shù)據(jù)傳輸實(shí)現(xiàn)方法,需要的朋友可以參考下2015-05-05
python開(kāi)發(fā)實(shí)例之Python的Twisted框架中Deferred對(duì)象的詳細(xì)用法與實(shí)例
這篇文章主要介紹了python開(kāi)發(fā)實(shí)例之Python的Twisted框架中Deferred對(duì)象的詳細(xì)用法與實(shí)例,需要的朋友可以參考下2020-03-03
pytorch 修改預(yù)訓(xùn)練model實(shí)例
今天小編就為大家分享一篇pytorch 修改預(yù)訓(xùn)練model實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-01-01
使用Python PIL庫(kù)讀取文件批量處理圖片大小實(shí)現(xiàn)
這篇文章主要為大家介紹了使用Python PIL庫(kù)讀取文件批量處理圖片大小實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07

