utamaro’s blog

誰かの役に立つ情報を発信するブログ

Djangoでcssファイルから画像ファイルを読み込む方法

Djangocssファイルから画像ファイルを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" >