目次
django3の静的ファイル(画像・CSSなど)
CSSや画像ファイルなどの静的ファイルへのアクセス方法を整理します。
まず、プロジェクトフォルダの直下に、CSSや画像ファイルなどの静的ファイルを置くための「static」フォルダを(なければ)以下のように作成します。
静的ファイルを置くサブフォルダの作成
「static」の下に、ファイルの種類ごとのフォルダを作ります。
今回は、「css」「images」「js」にします。
- cssが「CSS」ファイルの置き場所。
- imagesが「画像ファイル」の置き場所
- jsが「JavaScript」の置き場所。
です。
静的ファイル:HTMLファイルの記述方法
前回使ったhello.html を以下のように修正します。
{% load static %} <!DOCTYPE html> <html> <head> </head> <body> <h1>Hello World!!</h1> <p>日付は{{date}}だよ!</p> <div> <img src="{% static "images/k.png" %}" /> </div> </body> </html>
静的ファイルにアクセスするには、HTMLの中で以下のように書きます。
{% load static %}
・・・
<img src="{% static "images/k.png" %}" />
staticの設定をロードして、「static」フォルダをルートにした相対パスで書きます。
これによって
{% static "images/k.png" %}
の部分が
/static/images/k.png
に変換されます。
つまり「<img src="/static/images/boku.jpg" />」と同じです。
CSSもJavaScriptも同様です。
staricフォルダ以下のファイルは全て同じ方法でアクセス可能です。
static\imagesフォルダに、適当な画像をk.pngに名称変更してコピーし、実行すると。
画像が表示されていることを確認できました。
補足:説明の前提・参考情報
インストール・環境設定は以下の手順で行われている想定です。
なので、プロジェクト名も「demos」にしています。
また、プロジェクトの実行方法はこちらに記載の手順で行いました。
ではでは。