Django 動態讀取頭像：模板與上下文的最佳實踐

更新日期： 2025 年 1 月 20 日

在 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>

關鍵點說明

1. user.profile.photo 檢查：
   • 如果目前登入的使用者有設定頭像（photo 欄位不為空），將顯示該圖片。
   • 若無頭像，則顯示預設圖片。
2. 容錯處理：
   • 使用預設圖片作為後備選擇，避免未上傳頭像的使用者導致圖片載入錯誤。
3. 圖片樣式：
   • 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 變數的自動可用性

1. 登入檢查：確認 user 是否登入，避免 AnonymousUser 的情況。

{% if user.is_authenticated %}
    {{ user.username }}
{% else %}
    請先登入
{% endif %}

1. {% if user.is_authenticated %} {{ user.username }} {% else %} 請先登入 {% endif %}
2. 直接存取關聯資料：上下文處理器自動提供的 user 是目前登入使用者的實例，因此可以存取其 profile 資料。

{{ user.profile.photo.url }}

特別注意

• 未登入的使用者 (AnonymousUser) 預設不會有 profile 資料，需檢查登入狀態以避免錯誤。
• 若修改預設上下文處理器的行為，需確保模板中依然能獲取 user。

結論

通過修改模板和利用上下文處理器的內建功能，您可以輕鬆地在 Django 項目中實現動態顯示使用者頭像。

不僅簡化了程式邏輯，還確保模板設計的靈活性和穩定性。