Flask网页背景图片无法加载问题求助及原因排查

看终端输出的404请求：GET /static/static/img/Background.png HTTP/1.1，这说明你的CSS里的背景图路径写错了。

问题根源 #

• HTML里的<style>块是相对于当前页面的URL（也就是网站根目录/），所以url("static/img/Background.png")能正确指向/static/img/Background.png。
• 但你的外部CSS文件home.css放在static目录下，CSS里的相对路径是相对于CSS文件本身的位置，所以写url("static/img/Background.png")会变成从static目录出发找static/img/Background.png，也就是最终请求/static/static/img/Background.png，这显然不存在，所以报404。

修复方法 #

把CSS里的背景图路径改成以下两种写法之一即可：

写法一：相对路径（基于CSS文件位置） #

body {
    background-image: url("img/Background.png");
    font-family: 'Courier New', Courier, monospace;
}

从static/home.css出发，直接找同级的img目录下的图片，对应正确路径static/img/Background.png。

写法二：绝对路径（基于网站根目录） #

body {
    background-image: url("/static/img/Background.png");
    font-family: 'Courier New', Courier, monospace;
}

直接指定网站根目录下的static文件夹，不受CSS文件位置影响，更稳妥。

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