Flask应用图片无法加载求助：代码正常但图片不显示

我的Flask代码能正常运行，但应用里的图片始终加载不出来。另外希望页面能先显示图片，再展示抓取的文本，求帮忙排查代码问题，相关代码如下：

app.py #

from flask import Flask,render_template
from bs4 import BeautifulSoup
import requests

app=Flask(__name__,static_folder='C:\\Users\HP\OneDrive\Desktop\scraper\static')

@app.route('/index',methods=["GET","POST"])
def index():
  url="https://www.businesstoday.in/technology/news"
  req=requests.get(url)
  soup=BeautifulSoup(req.content,"html.parser")
  outerdata=soup.find_all("div",class_="widget-listing",limit=6)

  finalnews=""

  for data in outerdata:
     news=data.div.div.a['title']
     finalnews+="\u2022"+news+'\n'

  return render_template("index.html",News=finalnews)

if __name__=="__main__":
  app.run()

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width-device-width,initial-scale=1.0">
    <title>TEchify</title>
</head>   
<body>
    <div  style="width: 614px ; height: 700px;" >
       <img src="/static/image/7.jpg">
        <span>{{News|safe}}</span>
    </div>
</body>
</html>

问题解决及优化方案 #

1. 修复静态文件路径问题 #

• 绝对路径转义错误：Windows路径中的反斜杠需转义为双反斜杠，或改用正斜杠，把static_folder参数改成'C:/Users/HP/OneDrive/Desktop/scraper/static'。
• 推荐用相对路径：如果项目结构是scraper/下包含app.py、static/和templates/，直接删除static_folder参数，Flask会自动识别根目录下的static文件夹，避免硬编码路径的兼容性问题。

2. 确认图片文件有效性 #

• 检查7.jpg是否存在于static/image/目录下，文件名、扩展名完全匹配（注意Linux环境区分大小写，建议统一用小写命名）。

3. 优化文本展示逻辑（实现先图后文） #

当前用字符串拼接的方式传递新闻，HTML无法解析换行，改成数组+模板循环更规范：

• 修改app.py中的新闻处理代码：

  finalnews = []
  for data in outerdata:
      news = data.div.div.a['title']
      finalnews.append(news)
  return render_template("index.html", News=finalnews)
  

• 修改index.html的模板代码（用url_for引用静态文件，同时修正HTML语法错误）：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>TEchify</title>
  </head>   
  <body>
      <div style="width: 614px; height: 700px;">
          <!-- 使用Flask推荐的url_for加载静态文件 -->
          <img src="{{ url_for('static', filename='image/7.jpg') }}" alt="站点横幅">
          <!-- 用无序列表展示新闻，排版更清晰 -->
          <ul>
              {% for news_item in News %}
                  <li>{{ news_item }}</li>
              {% endfor %}
          </ul>
      </div>
  </body>
  </html>
  

4. 修正HTML语法错误 #

原HTML中的width-device-width改为width=device-width，IE-edge改为IE=edge，避免页面兼容性问题。

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