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

【问题标题】：Image not showing with Flask HTML CSS background imageFlask HTML CSS 背景图像未显示图像
【发布时间】：2017-11-11 20:39:18
【问题描述】：

我正在尝试使用 Python3 和 Flask 设置背景图像。

我的 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

【问题讨论】：

static_folder='/static/' 看起来很可疑。您能否检查一下您的文件系统中的文件夹位置是否正确？
我使用 PyCharm 并且链接是有效的，我之前也尝试过 'static/' 并且无法验证它
我也按照@afc11hn 的建议删除了静态文件夹，但并没有修复它。

标签： python html css flask

【解决方案1】：

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

确保您是这样组织文件的：

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

在 app.py（或任何你的烧瓶文件名）中，就像@afc11hn 所说的那样：

app = Flask('__name__')

...

然后在main.css中：

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

如果您仍然有同样的问题，请再次检查您如何组织文件和代码中的一些错字。它适用于我的徽标和 ajax 加载。

【讨论】：

【解决方案2】：

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

<div id="image" style="background:url(/static/images/image_of_something.jpg) center / cover no-repeat;"></div>

然后，您可以在样式表中进一步按 ID 或类设置图像样式。

【讨论】：

【解决方案3】：

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;
}

【讨论】：

我这样做并使用了app = Flask(__name__)，还用于我的CSS文件：background: url(img.png)，但没有解决问题
我还在我的 HTML 上尝试了我在 CSS 链接 href="{{ url_for('static', filename='main.css') }}" 上在线找到的内容，但这也不起作用