【Django】Webサイトに画像をレスポンシブに貼り付ける方法

Djangoで構築したWebサイトに画像を表示（レスポンシブ）する方法をまとめました。

画像の配置は以下の記事のとおり、「static」フォルダ配下を読み込ませるようにし、画像をWebサイトに反映しています。

「Django」でレスポンシブな画像を貼り付ける方法

今回のファイルの配置は以下の通りとなっています。
Webサイトに張り付けたい画像（pc.png）をstaticフォルダ配下の「images」フォルダ＞「network」配下にアップします。

mysite/
|-- settings.py
static/
|-- images
|   |-- network
|       `-- pc.png

「settings.py」の設定を確認

前回記事の設定どおり「setting.py」の中身を確認します。

$ vim mysite/settings.py

ファイル最終行の「STATIC_URL」を「static」フォルダとし、ここをベースディレクトリとして設定します。

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
 
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

HTMLファイルに画像を貼り付け

上記で設定を確認した後は、HTMLファイルに張り付けるだけとなります。
画像の貼り付け方はHTMLファイルの先頭に「{% load static %}」を設定し、staticフォルダを読み込ませます。

そして、画像を貼り付けたい場所に5行目のコマンドで貼り付けます。
「% staic ～%」でstaticフォルダを指定します。

「class=”img-fluid”」でBootstrap4のレスポンス指定となります。

{% load static %}

------中略------

<img src="{% static "images/network/pc.png"%}" alt="" class="img-fluid">

設定後、実際にWebサイトを見ると以下のようになります。

PCでの画像表示

モバイルでの画像表示

Djangoにレスポンシブな画像を張りつける設定方法は以上となります。