Flask模板中背景图片无法加载问题求助

我正在开发Flask应用，尝试通过HTML模板加载背景图片但无法成功，同时页面显示空白。HTTP响应日志如下：

127.0.0.1 - - [10/Aug/2022 09:54:23] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [10/Aug/2022 09:54:23] "GET /static/styles.css HTTP/1.1" 200 -

相关代码文件 #

app.py #

from flask import Flask, render_template, request, send_from_directory
from flask_ngrok import run_with_ngrok
app= Flask(__name__,template_folder = r'/flask_projects/app2/templates/',static_folder = r'/flask_projects/app2/static/') 
FAVICON_URL='https://favicon-generator.org/favicon-generator/htdocs/favicons/2015-01-17/50e4281252565f8fc85151c075d4e937.ico'
@app.route("/") 
def symptom(): 
    return render_template('Copy of symptoms_result.html')

@app.route("/detector", methods = ['GET', 'POST'])
def code_detector():
 if request.method == 'POST':
   return render_template('Copy of symptoms_result.html', prediction_text = 'The ICD Code is: {}'.format(response))

if __name__  == '__main__':
  run_with_ngrok(app)
app.run()

styles.css #

{   
    background-image: url("Penguins.png");
    background-size: cover; /* or contain depending on what you want */
    background-position: center center;
    background-repeat: no-repeat;
    text-align: left;
}

Copy of symptoms_result.html #

<!DOCTYPE html>
<html>
<head>
 <link rel="icon" href="data:,"/>
 <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='styles.css')}}"/>
</head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>    
</hmtl>

问题现象 #

页面显示空白，相关截图如下：

问题排查与解决 #

1. 修复HTML语法错误 #

你的HTML存在两处关键错误：

• 结束标签拼写错误：<hmtl>应为</html>
• meta标签未放在<head>内部，浏览器无法正确解析页面结构

修正后的HTML：

<!DOCTYPE html>
<html>
<head>
 <link rel="icon" href="data:,"/>
 <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='styles.css')}}"/>
 <meta charset="UTF-8"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>    
</head>
<body>
 <!-- 添加页面内容，避免无内容导致的视觉空白 -->
</body>
</html>

2. 补全CSS选择器 #

原CSS没有指定任何选择器（比如body或html），导致样式无法绑定到页面元素。修改为：

body {   
    background-image: url("Penguins.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: left;
    min-height: 100vh; /* 确保body占满视口高度，背景图完整显示 */
}

3. 验证图片存放路径 #

确保Penguins.png放在Flask配置的static文件夹根目录下（即/flask_projects/app2/static/Penguins.png）。如果图片在子文件夹（如static/images/），则CSS路径需改为url("images/Penguins.png")。

4. 优化Flask路径配置 #

建议使用相对路径替代绝对路径，避免跨环境兼容性问题：

app = Flask(__name__, 
            template_folder='templates', 
            static_folder='static')

（前提是app.py与templates、static文件夹在同一目录下）

5. 补充页面内容 #

即使背景图加载成功，页面无内容也会显示空白，需在<body>标签内添加基础内容。

内容的提问来源于stack exchange，提问作者Raz