はじめに
- 個人の学習時の備忘録目的のため、シンプルな記事です
- コード例は実際のコードから必要と思われる部分を抜粋しています
背景
- Django5.2を使ってアプリを作成中
問題
DjangoのHTMLテンプレートでstaticファイル(CSS, JavaScript, Images)を読み込む場合は、static テンプレートタグ{% static %}を使用します。
example.html（通常）
{% load static %}
<img src="{% static 'images/category_icons/category_1.png' %}" class="category-icon">
この時に、「category_1.png」の数字の部分にviews.pyから渡された変数（item.category_id）を使用することで、値によって表示するimageを切り替えたかったのですが、以下のように単純に置き換えただけでは動作しませんでした。
example.html（失敗例）
{% load static %}
<img src="{% static 'images/category_icons/category_{{ item.category_id }}.png' %}" class="category-icon">
原因
static テンプレートタグ内ではテンプレート変数が使用できず、{{ item.category_id }}がそのまま文字列として認識されるため。
解決方法
static テンプレートタグではなく、get_static_prefix テンプレートタグを使って以下のように書くと狙い通りに動作しました。
example.html（成功例）
{% load static %}
<img src="{% get_static_prefix %}images/category_icons/category_{{ item.category_id }}.png" class="category-icon">
get_static_prefix
通常は static テンプレートタグの使用を推奨しますが、 STATIC_URL がテンプレートに挿入される場所と方法をより厳密に制御する必要がある場合は、get_static_prefix テンプレートタグが使用できます
補足メモ
chatGPTに聞いたり過去の記事を参考にして、static テンプレートタグのまま変数を使う書き方も試しましたが、うまくいきませんでした。参考までに、試したコード例を以下に記載します。
【失敗例１】テンプレートフィルターaddを使って変数をセットする
example.html（失敗例１）
{% load static %}
<img src="{% static 'images/category_icon'|add:item.category_id|add:'.png' %}" class="category-icon">
【失敗例２】with テンプレートタグとテンプレートフィルターaddを使って変数を事前にセットする
example.html（失敗例２）
{% load static %}
{% with icon_url="images/category_icon" | add:item.category_id | add:'.png' %}
<img src="{% static icon_url %}" class="category-icon">
{% endwith %}
おわりに
get_static_prefix テンプレートタグについては、自分はchatGPTやネット検索では見つけられず、Djangoの公式ドキュメントを読んで存在を知りました。やはり公式ドキュメントを見るのが大事だなと改めて思いました。
参考