【Django】静的ファイルの参照方法

Djangoで静的ファイルを扱う際のメモ書きです。
静的ファイルの扱い方は、本番環境とローカル環境で異なってきますが、ここではローカル環境での静的ファイルについて扱います。

静的ファイルの配置場所

Djangoで静的ファイルを扱う際、ファイルを配置する場所としては、下記のような2パターンがあります。

① 各アプリケーション配下の「static」フォルダに配置
各アプリケーションで使用する静的ファイルを、各アプリケーション配下にある「static」フォルダ内に配置します。この場合、Djangoはデフォルトで各アプリケーション配下のstaticフォルダ内にある静的ファイルを探しに行くため、特に設定などは不要で、静的ファイルを呼び出すことができます。

② ①以外の場所に配置
上記①以外の場所に静的ファイルを配置する場合、配置するフォルダを「settings.py」ファイルで設定する必要があります。こちらはヘッダー画像など、プロジェクト共通で使用する静的ファイルの配置場所として使用するみたいです。

① 各アプリケーション配下の「static」フォルダに配置

それぞれのアプリケーション直下に「static」フォルダを作成し、静的ファイルの配置場所とします。static以下のフォルダ構成は、「static/アプリケーション名/」とし、この中に「css」「image」「JavaScript」フォルダを作成し、css・画像・JavaScriptの種類ごとに静的ファイルを配置していきます。

テンプレートのhtmlからは下記のように、「{% static ‘ファイルのパス’ %}」でパスを設定することで静的ファイルを参照することができます。

{% load static %}
<img src="{% static '/want2studyApp/img/sample1.jpg' %}" width="200">

{% static %}に設定するファイルのパスは、実際に配置した「static」フォルダ以降のパスを記載します。下記では実際の配置場所は、上記の画像のような配置になっています。

また、{% static %}は静的ファイルを扱うためのDjango特有のタグですが、これを使用するためには{% load static %}の記載が必要です。

①以外の場所に配置

①以外の場所(アプリケーション直下のstaticフォルダ以外)に静的ファイルを配置する場合は、プロジェクトの設定ファイル「settings.py」で、フォルダの場所を指定してやる必要があります。

上ではプロジェクトのルートフォルダ直下に「static」フォルダを作成しています。
この場合はプロジェクトは以下の「settings.py」に下記のような設定を追記する必要があります。

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

BASE_DIRというのはプロジェクトのルートディレクトリのことで、同じくsettings.pyの上のほうにデフォルトで設定されています。このままだとosがないというエラーが出ることがあるので、その場合は「import os」を追加で記載します。

テンプレートからの参照方法は①のパターンと同じになります。(ただし今回はstaticフォルダ配下に直接imageフォルダを配置しているのでパスが異なる)

{% load static %}
<img src="{% static '/image/sample1.jpg' %}" width="200">

参考

勉強する際に参考にさせて頂いたサイトです。

https://office54.net/python/django/css-javascript-static

https://qiita.com/okoppe8/items/38688fa9259f261c9440

https://qiita.com/Suchmos7/items/eb61727a3f65883028a6

https://just-python.com/document/django/project-setting/static-media

https://qiita.com/saira/items/a1c565c4a2eace268a07

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です