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

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

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

2020.06.10

「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にレスポンシブな画像を張りつける設定方法は以上となります。

Python構築入門

サーバーを構築するならVPSがおすすめです。

現役エンジニアがおすすめするVPSレンタルサーバ比較（高速SSD限定）

「Udemy」で無料のPython講座を検索

エンジニアのオンライン学習

ITエンジニアにおすすめの教材、オンラインスクールです。
無料からエンジニアの学習ができる教材などまとめているので参考にしてください。

オンライン学習の比較はこちらから

おすすめオンライン教材
Udemy
自宅で学習ができるオンラインスクール
【テックアカデミー】無料キャリアカウンセリング詳細へ