从Flask生成（内联CSS）HTML模板不起作用

Question

For a personal website I would like to randomly select a background picture (out of 4) for my starting page using flask. 对于个人网站，我想使用flask从我的起始页面中随机选择一张背景图片（共4张）。 When try to create a HTML template (with inline CSS for formatting), the resulting HTML does not display the picture chosen at random. 尝试创建HTML模板（使用嵌入式CSS进行格式设置）时，生成的HTML不会显示随机选择的图片。

So far I have tried to use url_for(), as I thought the problem might be that jinja cannot find the files, but this does not resolve my problem. 到目前为止，我已经尝试使用url_for（），因为我认为问题可能是Jinja无法找到文件，但这不能解决我的问题。

I also looked at the whitespace and delimiters, which seem to be correct in my mind. 我还查看了空白和定界符，它们在我看来似乎是正确的。

The code from my app.py: 来自我的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)

The code in my HTML file: 我的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>

The resulting HTML does not render the CSS. 结果HTML无法呈现CSS。 Where do I go wrong? 我哪里出错了？ Many Thanks 非常感谢

Answer 1

random_number is already storing the desired path. random_number已经在存储所需的路径。 Change url in the css: 更改CSS中的url ：

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

Or, you can simply pass intt to the template, and keep the original css templating: 或者，您可以简单地将intt传递给模板，并保持原始CSS模板：

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

从Flask生成（内联CSS）HTML模板不起作用

问题描述

The code from my app.py: 来自我的app.py的代码：

The code in my HTML file: 我的HTML文件中的代码：

1 个解决方案

解决方案1
0 2019-02-01 18:34:30

从Flask生成（内联CSS）HTML模板不起作用

问题描述

The code from my app.py: 来自我的app.py的代码：

The code in my HTML file: 我的HTML文件中的代码：

1 个解决方案

解决方案1 0 2019-02-01 18:34:30

解决方案1
0 2019-02-01 18:34:30