Fatal编程技术网
  • python/
  • Python 图像未与Flask HTML CSS背景图像一起显示

Python 图像未与Flask HTML CSS背景图像一起显示

python html css flask

Python 图像未与Flask HTML CSS背景图像一起显示,python,html,css,flask,Python,Html,Css,Flask,我正在尝试使用Python3和Flask设置背景图像 我的Python文件如下所示： app = Flask(__name__, static_url_path='/static/', static_folder='/static/') @app.route("/", methods=["GET"]) def index(): return render_template('index.html') /app.py /static/main.css /static/img.png HT

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

我的Python文件如下所示：

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

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

/app.py
/static/main.css
/static/img.png
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文件。我需要一种方法来服务静态文件夹中的静态文件，而不需要@app.route

tl；dr:删除
静态url\u路径
和
静态文件夹

在第一行中，您有：

app=Flask（\uuuuu name\uuuuuuu，static\uurl\u path='/static/'，static\u folder='/static/）

如果我删除了
static\u url\u path='/static/'
中的尾随斜杠，并从
static\u folder='/static/'
中删除了前导斜杠或两个斜杠，那么它对我有效

但既然这些都是问题，我就把它们都去掉

这对我很有用：

/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)
/模板/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>
tl；dr:删除
静态url\u路径
和
静态文件夹

在第一行中，您有：

app=Flask（\uuuuu name\uuuuuuu，static\uurl\u path='/static/'，static\u folder='/static/）

如果我删除了
static\u url\u path='/static/'
中的尾随斜杠，并从
static\u folder='/static/'
中删除了前导斜杠或两个斜杠，那么它对我有效

但既然这些都是问题，我就把它们都去掉

这对我很有用：

/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)
/模板/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>
我和你有同样的问题。在看了几个答案后，这将对您有所帮助

请确保按照以下方式组织文件：

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

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

/app.py
/static/main.css
/static/img.png
在app.py（或任何您的烧瓶文件名）中，只需按照@afc11hn所说的做：

app = Flask('__name__')

...
然后在main.css中：

.bg-logo {
  ..
  background: url(img.png);
  ..
}
如果您仍然有相同的问题，请再次检查您是如何组织文件和代码中的一些拼写错误的。它适用于我的logo和ajax加载。

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

请确保按照以下方式组织文件：

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

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

/app.py
/static/main.css
/static/img.png
在app.py（或任何您的烧瓶文件名）中，只需按照@afc11hn所说的做：

app = Flask('__name__')

...
然后在main.css中：

.bg-logo {
  ..
  background: url(img.png);
  ..
}
如果您仍然有相同的问题，请再次检查您是如何组织文件和代码中的一些拼写错误的。它适用于我的徽标和ajax加载。

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

<div id="image" style="background:url(/static/images/image_of_something.jpg) center / cover no-repeat;"></div>
然后，可以在样式表中进一步按ID或类设置图像样式

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

<div id="image" style="background:url(/static/images/image_of_something.jpg) center / cover no-repeat;"></div>
然后，可以在样式表中进一步按ID或类设置图像样式

static\u folder='/static/'
看起来可疑。请检查文件系统中的文件夹位置是否正确？我使用PyCharm，链接有效，我以前也尝试过“static/”，但无法验证。我也按照@afc11hn的建议删除了静态文件夹，但没有修复它。
static\u folder='/static/'
看起来可疑。你能检查一下这是你文件系统中的正确文件夹位置吗？我使用PyCharm，链接是有效的，我以前也尝试过“static/”，但无法验证它。我也按照@afc11hn的建议删除了静态文件夹，但没有修复它。我这样做了，并使用了
app=Flask（\uuuu name\uuuu）
也用于我的CSS文件：
background:url（img.png）
并且没有解决这个问题。我也在我的HTML上尝试了我在CSS链接
href=“{{url\u for（'static'，filename='main.CSS'）}}}”上找到的内容。
但这不起作用，我这样做了，并且使用了
app=Flask（\u name\uuu）
也用于我的CSS文件：
background:url（img.png）
并且没有解决这个问题。我还在我的HTML上尝试了我在CSS链接
href=“{{url\u for（'static'，filename='main.CSS'）}}”上找到的内容，但这也不起作用