Flask模板无法显示从DataFrame提取的图书图片报404错误如何解决

1. 核心问题定位 #

你看到的404日志是请求图书标题作为路径，说明模板里{{ book_image }}实际渲染出来的值是图书标题（A Time To Kill），不是有效的图片URL，浏览器会默认把它当做当前站点下的相对路径发起请求，自然找不到资源报404。

2. 具体问题及修复 #

2.1 修复get_image_link函数逻辑漏洞 #

原函数有三个明显问题：

• 匹配不到对应标题时，变量w未定义，会直接报错
• 没有处理匹配为空/Image字段无值的场景
• 每次请求都读取CSV文件，性能极低
  修复后的代码：

# 提前把CSV加载成字典，不用每次请求读文件
book_img_map = None
def init_book_data():
    global book_img_map
    df = pd.read_csv('C:/Users/suhel/Desktop/book recommendation/file.csv')
    # 直接转成 {书名: 图片链接} 的字典，匹配效率远高于循环遍历
    book_img_map = df.set_index('title')['Image'].to_dict()

# 服务启动时先初始化一次即可
init_book_data()

def get_image_link(title):
    # 没匹配到返回空值，避免未定义错误
    return book_img_map.get(str(title), '')

2.2 验证Image字段内容 #

检查你的CSV文件中Image列的值，确认存储的是完整的可访问图片URL（以http/https开头），如果是本地路径需要额外配置Flask的静态资源路由才能正常访问。
你可以在路由里加一行打印，确认拿到的图片链接是否正确：

@app.route('/info',methods=['POST'])
def info():
    if request.method == "POST":
        title = request.form.get('results')
        book_image=get_image_link(title)
        # 加这行打印，控制台看输出的是不是有效URL
        print(f"获取到的图片链接：{book_image}")
        details=get_book_details(title)   
        return render_template('info.html',title=title,details=details,book_image=book_image)

2.3 模板兜底处理 #

如果Image字段可能为空，在模板里加个兜底的占位图，避免显示裂图：

<div><br>
    <img src="{{ book_image if book_image.startswith('http') else '/static/default_book.png' }}" alt="Not found" style="margin-bottom: 5px;">
</div>

注意如果用本地占位图，需要把图片放在Flask项目的static目录下。

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