"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

django3の静的ファイル(画像・CSSなど)へのアクセス方法/Windows10

 f:id:arakan_no_boku:20190320212948j:plain

目次

django3の静的ファイル(画像・CSSなど)

CSSや画像ファイルなどの静的ファイルへのアクセス方法を整理します。 

まず、プロジェクトフォルダの直下に、CSSや画像ファイルなどの静的ファイルを置くための「static」フォルダを(なければ)以下のように作成します。

f:id:arakan_no_boku:20191214162049p:plain

静的ファイルを置くサブフォルダの作成

「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" />」と同じです。

CSSJavaScriptも同様です。

staricフォルダ以下のファイルは全て同じ方法でアクセス可能です。

static\imagesフォルダに、適当な画像をk.pngに名称変更してコピーし、実行すると。

f:id:arakan_no_boku:20210504110306p:plain

画像が表示されていることを確認できました。 

補足:説明の前提・参考情報

インストール・環境設定は以下の手順で行われている想定です。

arakan-pgm-ai.hatenablog.com

arakan-pgm-ai.hatenablog.com

なので、プロジェクト名も「demos」にしています。

また、プロジェクトの実行方法はこちらに記載の手順で行いました。

arakan-pgm-ai.hatenablog.com

ではでは。