web-dev-qa-db-ja.com

Flaskテンプレートに背景画像を設定する方法は？

私の背景画像は、@ app.route（ '/'）を持つこのテンプレートでのみ機能します。

 <header class="intro-header" style="background-image: url('static/img/home.jpg')">

これは次の場合に完全に正常に機能します。

@app.route('/')
def home():
    return render_template('post.html')

すべてが機能します。私はこれを手に入れます：

127.0.0.1 - - [19/Sep/2016 21:07:11] "GET /static/img/home.jpg HTTP/1.1" 304

しかし、私が同じテンプレートを使用すると：

@app.route('/post/')
def post():
     return render_template('post.html')

私はこれを手に入れます：

127.0.0.1 - - [19/Sep/2016 21:15:23] "GET /post/static/img/home.jpg HTTP/1.1" 404 -

そして、背景画像は空白です。

pythonhtmlcssflask
11
Yakuzhy

これはFlaskドキュメント で解決できる簡単な問題です

とにかく、テンプレートでは次のようなものを使用する必要があります。

background-image: url({{ url_for('static', filename='img/home.jpg') }})

ただし、Flaskメソッドを使用しない場合は、次のように使用します。

url('/static/img/home.jpg')

または、flaskの代わりに別のWebサーバーを使用します。Apacheなどのファイル用のデフォルトのWebサーバーとhttp://yoursite/static/img/home.jpgを介したアクセス

18
Hamed Mah

部分的なURLは、ドキュメントではなくスタイルシートのソースに関連して解釈される- w3 CSS

つまり、先頭の_/_を含めるには、url()を少し変更する必要があります。

_"background-image: url('/static/img/home.jpg')"
_
4
Andy