本文為 Django 圖片上傳功能系列教學，第 16 篇：
- Django 實現用戶圖片上傳功能：10 步驟詳細解析
- Django 圖片上傳功能完整代碼解析
- Django 模型中的三種主要關聯方式
- Django 中的 ImageField：簡單介紹與進階設定
- Django 中的 blank=True 和 null=True：深度解析
- Django Signals 的基礎入門
- 深入解析 Django 的 @receiver 裝飾器：原理與實踐
- Django 圖片上傳功能：信號執行函數設計解析
- 如何在 Django 中載入和使用信號（Signals）
- Django 模型建立後的必備步驟：執行 migrate
- 使用 Django 創建用戶個人資訊更新表單
- 如何使用 Django 更新用戶個人資料
- 深入了解 HTML 表單的 enctype=”multipart/form-data”
- Django 中媒體檔案處理：設定與執行解析
- Django 專案中靜態與媒體檔案的正確配置指南
- Django 動態讀取頭像：模板與上下文的最佳實踐 👈 所在位置
若閱讀完本文，可以深入閱讀 圖片上傳 AWS S3。
在 Django 應用中，讓使用者頭像動態顯示是提升個人化體驗的重要一步。
本篇文章將從 模板修改 與 上下文處理器的自動存取機制 兩個角度，說明如何實現從資料庫中讀取頭像並在前端動態顯示。
修改 navbar.html 模板
要在模板中動態顯示使用者頭像，需要確保 <img> 標籤根據使用者是否有上傳頭像顯示對應的圖片。
以下是模板的修改方式：
<div class="w-10 rounded-full">
<img
alt="{{ user.username }}'s avatar"
src="{% if user.profile.photo %}{{ user.profile.photo.url }}{% else %}https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp{% endif %}"
/>
</div>
關鍵點說明
user.profile.photo檢查：- 如果目前登入的使用者有設定頭像（
photo欄位不為空），將顯示該圖片。 - 若無頭像，則顯示預設圖片。
- 如果目前登入的使用者有設定頭像（
- 容錯處理：
- 使用預設圖片作為後備選擇，避免未上傳頭像的使用者導致圖片載入錯誤。
- 圖片樣式：
w-10 rounded-full是 CSS 類別，通常用於設置圖片的寬度與圓形外觀。
上下文處理器與 user 變數的自動存取
在 Django 中，user 變數可直接在模板中使用，因為 Django 預設啟用了 上下文處理器。
該處理器會將目前的使用者物件自動加入模板上下文，無需手動傳遞。
上下文處理器的設定
確認 settings.py 的 TEMPLATES 設定中，已啟用 django.contrib.auth.context_processors.auth：
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth', # 確保這行存在
'django.template.context_processors.static',
'django.contrib.messages.context_processors.messages',
],
},
},
]
如何驗證 user 變數的自動可用性
- 登入檢查：確認
user是否登入，避免AnonymousUser的情況。
{% if user.is_authenticated %}
{{ user.username }}
{% else %}
請先登入
{% endif %}-
{% if user.is_authenticated %} {{ user.username }} {% else %} 請先登入 {% endif %} - 直接存取關聯資料：上下文處理器自動提供的
user是目前登入使用者的實例，因此可以存取其profile資料。
{{ user.profile.photo.url }}特別注意
- 未登入的使用者 (
AnonymousUser) 預設不會有profile資料，需檢查登入狀態以避免錯誤。 - 若修改預設上下文處理器的行為，需確保模板中依然能獲取
user。
結論
通過修改模板和利用上下文處理器的內建功能，您可以輕鬆地在 Django 項目中實現動態顯示使用者頭像。
不僅簡化了程式邏輯，還確保模板設計的靈活性和穩定性。