django 讀取圖片到頁(yè)面實(shí)例
首先，我們看看models.py里的模型，有個(gè)upload_to參數(shù)，為了和過(guò)去一刀兩斷，樓主決定給upload_to賦值一個(gè)新的值叫avatar/，這個(gè)參數(shù)的意思是把文件上傳到MEDIA_ROOT/avatar/下面。
既然這里upload_to的值是連接在MEDIA_ROOT/路徑后的一部分，所以很自然的只能寫(xiě)成avatar/或者./avatar/，而不能寫(xiě)成/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文件夾，專(zhuān)門(mén)用來(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`中寫(xiě)吧，這里寫(xiě)的路由和普通的路由不一樣，因?yàn)槲覀冞@里的所有的媒體文件其實(shí)都是靜態(tài)文件的一部分，而且我們一般路由符合條件后是去執(zhí)行`views`中的某個(gè)函數(shù)，這里卻是去某個(gè)文件夾中找文件，所以肯定寫(xiě)法上是不同的，寫(xiě)法是`static(如果符合這樣規(guī)律的url，就去這個(gè)目錄中找文件)`：
導(dǎo)入這兩個(gè)包
setting.py中
from django.conf import settingsfrom django.conf.urls.static import staticurlpatterns = [...] + 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中填寫(xiě)正確的圖片地址。我們之前說(shuō)了圖片是儲(chǔ)存在/media/avatar/下面的，所以圖片的路徑就是：
<img src='https://rkxy.com.cn/media/{{user.headImg}}' alt=''/>
因?yàn)槲覀儍?chǔ)存在數(shù)據(jù)庫(kù)中的圖片路徑是upload_to的值和圖片名稱(chēng)的拼接，比如下面的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è)參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP中if語(yǔ)句、select 、while循環(huán)的使用方法2. html小技巧之td,div標(biāo)簽里內(nèi)容不換行3. xml中的空格之完全解說(shuō)4. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問(wèn)題……5. XML入門(mén)的常見(jiàn)問(wèn)題(四)6. php bugs代碼審計(jì)基礎(chǔ)詳解7. ASP使用MySQL數(shù)據(jù)庫(kù)的方法8. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享9. WMLScript的語(yǔ)法基礎(chǔ)10. msxml3.dll 錯(cuò)誤 800c0019 系統(tǒng)錯(cuò)誤:-2146697191解決方法
網(wǎng)公網(wǎng)安備