【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つ上の階層なのでこういった記述になってます。階層が違う人は変更して調整してくださいね。