Flask应用静态背景图片404找不到问题求助

问题描述 #

用Flask开发的应用基础功能正常，但给div加背景图片时触发404错误，控制台显示请求https://abc.mydomain.com/cc/static/Screen21.png未找到。试过换路径、图片格式、调整.htaccess等方法都没解决，求可行方案。

相关代码与结构 #

HTML代码 #

<div style="width: 100%; height: 60em; justify-content: center; margin-top: 100px;">
  <div id="cc_overview">

  </div>
</div>

CSS代码 #

#cc_overview {
        border-style: solid;
        border-width: 3px;
        border-color: rgb(226, 167, 46);
        background-image: url('static/Screen21.png');
        border-radius: 20px;
        min-width: 20em;
        min-height: 20em;
        max-width: 40em;
        max-height: 40em;
        transform: translate(-10em,0);
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
}

应用文件夹结构 #

• application
  • app.py
  • static
    • Screen21.png
  • templates
    • page.html

.htaccess内容 #

# DO NOT REMOVE. CLOUDLINUX PASSENGER CONFIGURATION BEGIN
PassengerAppRoot "/home/[username]/[full domain including subdomain]/application"
PassengerBaseURI "/"
PassengerPython "/home/[username]/virtualenv/[full domain including subdomain]/application/3.11/bin/python"
# DO NOT REMOVE. CLOUDLINUX PASSENGER CONFIGURATION END
RewriteEngine On 
# RewriteRule ^https://%{HTTP_HOST}%{REQUEST_URI} [END,NE]
# DO NOT REMOVE OR MODIFY. CLOUDLINUX ENV VARS CONFIGURATION BEGIN
<IfModule Litespeed>
SetEnv DBPW [some random characters here]
</IfModule>
# DO NOT REMOVE OR MODIFY. CLOUDLINUX ENV VARS CONFIGURATION END
RewriteRule ^/.*$ - [F,L]

解决方案 #

1. 修正图片引用路径 #

Flask的静态资源需要正确的路径映射，有两种处理方式：

• 模板内动态生成路径：在HTML中用Flask的url_for生成静态资源路径，替换CSS中的硬编码路径
  修改HTML代码：

  <div style="width: 100%; height: 60em; justify-content: center; margin-top: 100px;">
    <div id="cc_overview" style="background-image: url('{{ url_for('static', filename='Screen21.png') }}');">
    </div>
  </div>
  

  同时删除CSS里的background-image行。
• 使用绝对路径：如果用外部CSS，把路径改为根目录开头的绝对路径：

  background-image: url('/static/Screen21.png');
  

2. 调整.htaccess的Rewrite规则 #

当前.htaccess里的RewriteRule ^/.*$ - [F,L]会拦截所有根目录开头的请求，包括静态资源。需要先放行静态资源目录：
将原规则替换为：

# 允许静态资源目录访问
RewriteRule ^/static/ - [L]
# 拦截其他未授权请求
RewriteRule ^/.*$ - [F,L]

3. 修正Passenger部署路径 #

从请求路径/cc/static/...推测应用部署在子路径/cc下，需要修改Passenger的基础URI配置：

PassengerBaseURI "/cc"

确保Passenger正确映射应用到子路径，静态资源请求才能被正确解析。

4. 检查文件权限 #

确保static文件夹权限为755，Screen21.png文件权限为644，保证服务器进程能读取这些资源。

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