"BOKU"のITな日常

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

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

 f:id:arakan_no_boku:20190320212948j:plain

CSSや画像ファイルなどの静的ファイルへのアクセス方法です。 

目次

前提

インストール・環境設定で、静的ファイルを置く「static」フォルダの設定を追加できている想定ですすめます。

arakan-pgm-ai.hatenablog.com

arakan-pgm-ai.hatenablog.com

なので。

プロジェクト名は前回の流れで「demos」にしておきます。

静的ファイル(CSS、画像、JavaScript)を扱うために、プロジェクトフォルダの直下にstaticフォルダを以下のように作ってある想定です。

f:id:arakan_no_boku:20191214162049p:plain

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

CSSJavaScriptも同様です。

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

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

f:id:arakan_no_boku:20210504110306p:plain

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

なお、実行方法はこちらと同じです。

arakan-pgm-ai.hatenablog.com

ではでは。