gpt4 book ai didi

python - 从 Flask 生成(内联 CSS)HTML 模板不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 21:18:44 24 4
gpt4 key购买 nike

对于个人网站,我想使用 Flask 为我的起始页面随机选择一张背景图片(共 4 张)。当尝试创建 HTML 模板(使用内联 CSS 进行格式化)时,生成的 HTML 不会显示随机选择的图片。

到目前为止,我已经尝试使用 url_for(),因为我认为问题可能是 jinja 找不到文件,但这并不能解决我的问题。

我还查看了空格和分隔符,在我看来这似乎是正确的。

我的 app.py 中的代码:

flask import Flask, render_template
import random
app = Flask(__name__)

@app.route('/')
def index():
intt = random.randint(1, 4)
random_number = ("../Images/artwork/{}.jpeg".format(intt))
return render_template('index.html', random_number=random_number)

我的 HTML 文件中的代码:

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


<style>
@font-face {
font-family: "Pretoria Gross";
src: url("../Fonts/Pretoria.ttf");
}

ge {
color: Yellow;
font-family: Pretoria Gross;

font-size:70px;
text-align: center;
display:inline-block;
position:relative;
width:100%;

background: url('../Images/artwork/{{random_number}}.jpeg') no-repeat top center;
background-position: center top;
background-size: 25% auto;
}
</style>

<a href="about.html">
<ge>Website<br/>Title<br/>here</ge>
</a>

生成的 HTML 不会呈现 CSS。我哪里出错了?非常感谢

最佳答案

random_number 已存储所需的路径。更改CSS中的url:

background: url('{{random_number}}') no-repeat top center;

或者,您可以简单地将 intt 传递给模板,并保留原始的 css 模板:

return render_template('index.html', random_number=intt)

关于python - 从 Flask 生成(内联 CSS)HTML 模板不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54485243/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com