Question

我尝试使用带有Flask的Python3设置背景图片。

我的Python文件如下所示：

app = Flask(__name__, static_url_path='/static/', static_folder='/static/')

@app.route("/", methods=["GET"])
def index():
  return render_template('index.html')

HTML块包括：

<head>
  <link rel="stylesheet" href="/static/main.css">
  <!-- Bootstrap 4 beta -->
     <link rel="stylesheet"...
</head>
<body>
<div class="container">
<div class="row">
    <div class="col-md-4 col-12 bg-logo">
        col 1
    </div>
</div>
</div>
</body>

我的CSS文件：

.bg-logo{
  background: url({{ url_for ('static', filename = '/static/img.png') }});
  background-size: 100% 100%;
  height: 300px;
  background-size: cover;
}

由于某种原因，浏览器无法正确访问CSS文件。我需要一种方法来提供静态文件夹中的静态文件而不需要@ app.route

Answer 1

我和你有同样的问题。看了几个答案后，这对你有帮助。

确保按照以下方式整理文件：

/app.py
/static/main.css
/static/img.png

在app.py（或任何烧瓶文件名）中，只需按@ afc11hn说：

app = Flask('__name__')

...

然后在main.css中：

.bg-logo {
  ..
  background: url(img.png);
  ..
}

如果您仍然遇到同样的问题，请再次检查您的文件组织方式和代码中的拼写错误。它适用于我的徽标和ajax加载。

Answer 2

tl; dr：删除static_url_path和static_folder

在第一行中你有：

app = Flask(__name__, static_url_path='/static/', static_folder='/static/')

如果我删除static_url_path='/static/'中的尾部斜线并从static_folder='/static/'删除前导斜杠或两个斜杠，那么它对我有效。

但由于那些是defaults，我只想删除它们。

这对我有用：

/main.py

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/", methods=["GET"])
def index():
    return render_template('index.html')


if __name__ == '__main__':
    port = int(5000)
    app.run(host='0.0.0.0', port=port, debug=True)

/templates/index.html

<html>
<head>
  <link rel="stylesheet" href="/static/main.css">
</head>
<body>
<div class="container">
<div class="row">
    <div class="col-md-4 col-12 bg-logo">
        col 1
    </div>
</div>
</div>
</body>
</html>

/static/main.css

.bg-logo{
  background: url({{ url_for ('static', filename = '/static/img.png') }});
  background-size: 100% 100%;
  height: 300px;
  background-size: cover;
}

Answer 3

我过去克服此问题的唯一方法是将图像硬编码到HTML页面/模板中。例如；

GetStringCritical

然后可以在样式表中按ID或类对图像进行样式设置。

图像未显示Flask HTML CSS背景图像

3 个答案: