Flask本地服务器无法显示HTML背景图问题求助

问题原因 #

直接打开HTML文件时浏览器处于本地文件读取模式，允许访问file://开头的本地路径；但通过Flask的HTTP服务器访问时，浏览器出于安全限制会阻止加载本地文件系统的资源，同时服务器也无法识别并映射这类本地绝对路径。

解决步骤 #

1. 调整文件结构 #

按照Flask的静态资源规范，在项目根目录创建static文件夹（Flask默认的静态资源目录），可以在其中再创建images子文件夹用于分类存放图片资源，然后将network.jpg移动到static/images目录下。

2. 修改背景图路径 #

将HTML中的背景图路径替换为Flask可识别的静态资源路径：

• 如果使用Jinja2模板（Flask默认模板引擎），推荐用url_for生成路径，确保兼容性：

body {
  background-image: url({{ url_for('static', filename='images/network.jpg') }});
  background-repeat: no-repeat;
  background-size: cover;
}

• 如果是普通HTML文件，直接使用相对服务器根目录的路径即可：

body {
  background-image: url('/static/images/network.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

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