django 讀取圖片到頁面實例
首先，我們看看models.py里的模型，有個upload_to參數(shù)，為了和過去一刀兩斷，樓主決定給upload_to賦值一個新的值叫avatar/，這個參數(shù)的意思是把文件上傳到MEDIA_ROOT/avatar/下面。
既然這里upload_to的值是連接在MEDIA_ROOT/路徑后的一部分，所以很自然的只能寫成avatar/或者./avatar/，而不能寫成/avatar/，樓主已經(jīng)以身試法過。
還有一點，這里提到了MEDIA_ROOT，可是我們一直沒設(shè)置過啊。
headImg = models.FileField(upload_to='avatar/')
所以理所當(dāng)然的要設(shè)置MEDIA_ROOT，所以在settings.py中做如下設(shè)置，這里的意思就是說，我們在項目根目錄下會新建一個media文件夾，專門用來存放media文件。結(jié)合上面的設(shè)置可推出，我們上傳的文件會放在/media/avatar/下：
MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace("\\", "/")```
這`MEDIA_ROOT`就是媒體根目錄的路徑，這……好像是廢話。上傳的文件也會放在這里，但是正如我們上面探索時提到的：使用文件，實質(zhì)上也是調(diào)用了一個文件的url，在Django中提到url，都是要從`urlpatterns`中過濾一遍的。
所以，展示圖片的邏輯應(yīng)該是這樣的：我們調(diào)用圖片的url一般是有規(guī)律的，我們過濾的時候發(fā)現(xiàn)，只要符合，就按照文件名從媒體根目錄中找相應(yīng)的文件。
- 所以，我們先找到圖片url的規(guī)律，都說了，圖片都是存在`/media/avatar/`中，也就是說圖片的路徑應(yīng)該是包含`/media/avatar/`的，為了保險起見以及后續(xù)我們可能會存除了頭像之外的其他文件，比如儲存縮略圖的叫`/media/thumb/`，所以這里我們?nèi)〈蠹夜灿械腵/media/`作為過濾url的規(guī)律。
MEDIA_URL = '/media/'
- 這也就是為什么`MEDIA_ROOT`和`MEDIA_ROOT`經(jīng)常一起出現(xiàn)，并且他們的有相同的值。
準(zhǔn)備好這些后，在`urlpatterns`中寫吧，這里寫的路由和普通的路由不一樣，因為我們這里的所有的媒體文件其實都是靜態(tài)文件的一部分，而且我們一般路由符合條件后是去執(zhí)行`views`中的某個函數(shù)，這里卻是去某個文件夾中找文件，所以肯定寫法上是不同的，寫法是`static(如果符合這樣規(guī)律的url，就去這個目錄中找文件)`：
導(dǎo)入這兩個包
setting.py中
from django.conf import settings from django.conf.urls.static import static urlpatterns = [ ... ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)```
如果你之前在探索的時候經(jīng)常會看看瀏覽器會輸出什么錯誤，你一般都是看到要么是404 error，要么就是500 error。為什么會出現(xiàn)404 error，就是因為我們給的圖片路徑?jīng)]有在urlpatterns中定義過，所以Django在要展示圖片的時候，一看，咦，這什么鬼url，在urlpatterns中根本沒有對應(yīng)的可以查，所以是錯誤的請求網(wǎng)址，返回404 error。在urlpatterns中添加之后，就不會有404 error了。
好了，我們還剩下最后一步，就是在img的src中填寫正確的圖片地址。我們之前說了圖片是儲存在/media/avatar/下面的，所以圖片的路徑就是：
<img src="/media/{{user.headImg}}" alt=""/>
因為我們儲存在數(shù)據(jù)庫中的圖片路徑是upload_to的值和圖片名稱的拼接，比如下面的avatar/test_mini.jpg。
補充知識：解決django的html無法加載圖片的問題
html的代碼都是對的
但是django網(wǎng)頁加載不出圖片
這里來給大家演示一下，因為setting.py少了東西，無法查找圖片路徑
STATICFILES_DIRS=( os.path.join(BASE_DIR,'static'), )
補上這個代碼
html插入圖片很簡單，我這里就舉個栗子
{% load static %} <body background="{% static 'imges/bg.png' %}"></body>
運行一下
ok, nice!
以上這篇django 讀取圖片到頁面實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在本篇文章里小編給大家整理了關(guān)于Python表達式的優(yōu)先級的知識點內(nèi)容，需要的朋友們可以學(xué)習(xí)下。2020-02-02
Python簡單檢測文本類型的2種方法【基于文件頭及cchardet庫】
這篇文章主要介紹了Python簡單檢測文本類型的方法,結(jié)合實例形式分析了基于基于文件頭及cchardet庫兩種文本類型檢測的方法,需要的朋友可以參考下2016-09-09
這里向大家分享一下python爬蟲的一些應(yīng)用，主要是用爬蟲配合簡單的GUI界面實現(xiàn)視頻，音樂和小說的下載器。今天就先介紹如何實現(xiàn)一個動態(tài)視頻下載器，需要的朋友可以參考下2019-09-09
Jupyter Notebook遠(yuǎn)程登錄及密碼設(shè)置操作
今天小編就為大家分享一篇Jupyter Notebook遠(yuǎn)程登錄及密碼設(shè)置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-04-04
這篇文章主要介紹了python使用selenium爬蟲知乎的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了python矩陣/字典實現(xiàn)最短路徑算法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
在本篇文章里小編給大家整理的是一篇關(guān)于java字符串格式化輸出實例講解，有需要的朋友們可以學(xué)習(xí)下。2021-01-01
今天小編就為大家分享一篇pandas 使用均值填充缺失值列的小技巧分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-07-07
這篇文章主要為大家詳細(xì)介紹了Python股票數(shù)據(jù)可視化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
flask框架json數(shù)據(jù)的拿取和返回操作示例
這篇文章主要介紹了flask框架json數(shù)據(jù)的拿取和返回操作,結(jié)合實例形式分析了flask框架針對json格式數(shù)據(jù)的解析、數(shù)據(jù)庫操作與輸出等相關(guān)操作技巧,需要的朋友可以參考下2019-11-11