Djangoでcssファイルから画像ファイルを読み込む方法
Djangoでcssファイルから画像ファイルをurlで指定する方法について紹介します。
やることは簡単です。
Djangoの設定ファイルで以下のような設定をしていると思います。
STATIC_URL = '/static/' STATIC_ROOT = 'staticfiles'
この設定をしている場合、staticファイルは/static/
がurlのルートとなります。
また、staticのルートディレクトリはstaticfiles
になります。
つまり、staticfiles/img/sample.png
というファイルをcssファイルから読み込みたい場合以下のようになります。
background-image: url("/static/img/sample.png");
ただ、staticファイルのurlルートを変更した場合にはcssの中を修正する必要が出てきます。
そのときはとても面倒になるので、scssで変数として管理しておくと良いでしょう。
おまけ
staticファイルをhtmlファイルから使用する方法も紹介します。
{% load static %}
を入れると、{% static "img/sample.png" %}
のように指定できます。
/static/img/sample.png
に置換されます。
{% load static %} <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script> <img src="{% static "img/sample.png" %}" alt="sample" >