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


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

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

【Django】Bootstrapのテンプレートを適用する方法

2020年5月24日

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


関連記事


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUTこの記事をかいた人

blank

インターネット関連のSEをやっています。 ネットワーク、サーバー、ストレージ、仮想基盤まで幅広く手を出しており、MVNOの構築経験もあります。 現在は、Pythonを使ったプログラミングの開発をしネットワークの自動化ツールを作成しています! Pythonの入門書も作成しているので、ぜひ参考にしてください!