【Django】CSSで背景画像が読み込まれないときの解決策がこちら。

ども、Shinです。

Djangoを開発環境で構築してるときのこと。

ローカルで背景画像が表示されないバグ?で詰んだから備忘録として残しておきます。

普通にhtmlのパス指定がミスったと思ってウロウロしてると沼ります。

※これから紹介する解決策は「開発環境のみ」動作します。デプロイして本番環境で画像を表示したいときは、また別途記事にするのでお待ちを。

画像とかCSSは一箇所(ルートフォルダ)に集めないといけない

画像やらの静的なファイル群はWEBサーバーがまとめて、その画像ファイルが置いてある場所を探してレスポンスを返すというのがDjangoのルールになってます。

なので、その一箇所にまとめておく変数を用意しておきます。

(settings.py)

MEDIA_ROOT = BASEDIR / 'media'
MEDIA_URL = 'media/'

MEDIA_ROOTは画像を置いておく場所を指定します。

今回の場合はBASEDIR(manage.pyと同じ階層)にmediaというディレクトリを参照しにいくように設定しました。

なので各自、mediaという名前でディレクトリを作りましょう。

そしてその中に使いたい画像ファイルを置いてください。

MEDIA_URLは’media/’というURLにアクセスして画像を表示するという意味です。これら2つの変数を用意しないと表示されないので注意が必要。

プロジェクト階層にあるurls.pyの変更

お次はプロジェクト階層にあるurls.pyのコードを編集していきます。

(urls.py)

from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings
from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings

urlspattern = [
     path('admin/', admin.site.urls),
     path(''), include('marioshareapp.urls.py'))
] + static(settings.MEDIA_URL, doucument_root=MEDIA_ROOT)

付け加えたのは「+static(‘MEDIA_URL’, document_root=MEDIA_ROOT)」です。

考え方はpath()とほぼ同じです。

最後にCSSでしっかりとパスを指定する

backgroundで指定する画像パスをしっかりと固定してください。

(public.css)

main {
  background:url("../media/public_thumbnail.png");
  background-size:contain; 
  background-color:rgba(249, 235, 235, 0.8);
  background-blend-mode: lighten;
  }

url(../media/あなたが設定したい画像の名前)でOKです。

私の場合はmediaが現在いるstaticディレクトリより1つ上の階層なのでこういった記述になってます。階層が違う人は変更して調整してくださいね。

最後に背景が現れたかどうかの確認

背景画像を設定しました。

MarioShareというサイトを作っているのでマリオメーカーに関する背景です。

繰り返し画像が表示されて少し変ですが、とりあえずローカル環境において背景画像の出力に成功したので一件落着。

本番環境でのStaticファイルの取り扱いは次回説明する予定です。

コメントを残す

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