【问题标题】:Generating (inline CSS) HTML templates from Flask not working从 Flask 生成(内联 CSS)HTML 模板不起作用
【发布时间】:2019-02-01 18:29:39
【问题描述】:

对于个人网站,我想使用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。我哪里错了? 非常感谢

【问题讨论】:

    标签: python html css flask jinja2


    【解决方案1】:

    random_number 已经在存储所需的路径。在css中更改url

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

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

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

    【讨论】:

    • 您好 Ajax1234,感谢您的评论。你当然是对的,上面的代码没有意义,我已经尝试过插入路径和随机数 - 但问题仍然存在。运行应用程序时出现的错误是:“GET /Images/artwork/3.jpeg HTTP/1.1”404 - “GET /Fonts/Pretoria.ttf HTTP/1.1”404 - 抱歉,这是我的第一篇文章,我会的下次要小心点!
    • @secretsanta 嗯。您是否将图像目录放在主项目目录的/static/images 文件夹中? flask 自动在 /static/images 文件夹中搜索所有图像。因此,您的网址将变为:/static/images/random_val.jpeg
    • 我没有!太棒了,它现在可以工作了。感谢您的帮助
    猜你喜欢
    • 2020-10-24
    • 2015-06-19
    • 2015-03-29
    • 1970-01-01
    • 2011-11-10
    • 1970-01-01
    • 2022-12-05
    • 1970-01-01
    • 2018-04-20
    相关资源
    最近更新 更多