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




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

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

おすすめオンライン教材
自宅で学習ができるオンラインスクール

ITエンジニアの開発・検証・学習としてインターネット上で専用のサーバ(VPS)を利用しましょう!
実務経験はVPSで学べます。



コメントを残す

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

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

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