使用 FLASK 时使用 JS 函数更改背景图像

【问题标题】：Changing Background Image using JS function while using FLASK使用 FLASK 时使用 JS 函数更改背景图像
【发布时间】：2025-12-02 17:25:01
【问题描述】：

我正在尝试使用 javascript 更改背景图像。我正在使用 FLASK 和 Jinga 模板来制作我的网站。我对以下代码感到困惑。

我尝试过使用不同的引号，但没有成功。在 CSS 中，它工作正常，但在 JS 中却不是。在此先感谢:)

    document.body.style.backgroundImage=  "url(\"{{url_for('static', filename ='sacred5.jpg' )\")}}";

【问题讨论】：

【解决方案1】：

您可以使用内联 CSS 指定 background-image 或在页面加载后使用 js 进行更改：

内联版本：

在template.html:

<html>
  <body style='background-image:url({url})'>
     ...
  </body>
</html>

然后，在app.py：

@app.route('/your_route', methods=['GET'])
def your_route():
   return flask.render_template('template.html', url='/static/sacred5.jpg')

在您的homepage.js 中使用jQuery：

$(document).ready(function(){
   $('body').css('background-image', '/static/sacred5.jpg');
});

【讨论】：