图像未在烧瓶上渲染 - 图像损坏 - 图片保存在静态/图像中

Question

我是烧瓶新手，如果这是一个简单的错误，请原谅我。

我已经通过烧瓶建立了一个基本网站，但我在页面上呈现图像时遇到了问题。它实际上工作了一段时间，但似乎不再工作了。

简而言之，我有一个文件可以抓取某个网站的数据，然后绘制图像（matplotlib），然后将其保存到我的静态文件夹中的图像文件夹中。我可以看到图像已正确绘制并保存到图像文件夹中，但是当我尝试在我的一个页面上显示它时，它给了我可怕的破碎图像图片（看起来像被撕成两半的图片的小东西)。

这是检索、绘制和保存图像的脚本

import requests
from bs4 import BeautifulSoup
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt

def scrape(cells):
    cell_contents = []
    for cell in cells:
        text = cell.text.strip()
        cell_contents.append(text)
    return (cell_contents)

def remove_char(string):
    import re
    string = re.sub("[A-Za-z]", "", string)
    return string

def get_fixtures(url):
    r = requests.get(url)
    soup = BeautifulSoup(r.text, 'html.parser')
    table = soup.find('table')
    cells = table.find_all("td")

    output = scrape(cells)

    output = np.array(output)
    output = output.reshape(21, 8)
    output = pd.DataFrame(output)
    header_row = 0
    output.columns = output.iloc[header_row]
    output = output.drop(header_row)
    output = output.reset_index(drop=True)
    output.columns = ["team", "gw1", "gw2", "gw3", "gw4", "gw5", "gw6", "total"]

    output.gw1 = output.gw1.apply(remove_char)
    output.gw1 = output.gw1.apply(float)
    output.gw2 = output.gw2.apply(remove_char)
    output.gw2 = output.gw2.apply(float)
    output.gw3 = output.gw3.apply(remove_char)
    output.gw3 = output.gw3.apply(float)
    output.gw4 = output.gw4.apply(remove_char)
    output.gw4 = output.gw4.apply(float)
    output.gw5 = output.gw5.apply(remove_char)
    output.gw5 = output.gw5.apply(float)
    output.gw6 = output.gw6.apply(remove_char)
    output.gw6 = output.gw6.apply(float)
    EG = output
    EG.total = EG.total.apply(float)
    return(EG)

EG_data = get_fixtures("https://playerdatabase247.com/include_premier_league_fixture_tracker_uusi.php?listtype=expgoals")
EG_data.name = 'Expected Goals'
ECS_data = get_fixtures("https://playerdatabase247.com/include_premier_league_fixture_tracker_uusi.php?listtype=cs")
ECS_data.name = 'Expected clean sheets'

def plot_fixture_data(df):
    fig, ax = plt.subplots(figsize = (15,8))
    fig.tight_layout()
    ax.bar(df.team, df.total, color = "firebrick")
    ax.bar(df.team, df.gw1+df.gw2+df.gw3, color = "darksalmon")
    ax.bar(df.team, df.gw1, color = "coral")
    ax.set_ylabel("{} (Upcoming gameweek, three week, and six week total)".format(df.name), size = 12)
    plt.xticks(rotation = 30)
    plt.savefig('static/images/plot_for_{}.png'.format(df.name),bbox_inches = 'tight')
    return

然后我在我的主文件开头调用这个文件中的函数

from flask import Flask, render_template, send_file, make_response
import pandas as pd
from GetFixtres import EG_data,ECS_data,plot_fixture_data

plot_fixture_data(EG_data)
plot_fixture_data(ECS_data)


app = Flask(__name__)

然后是我尝试显示图像的特定页面，这是代码

{% extends "layout.html" %}


{% block content %}

    <P> This page looks specifically at expected goals by each team over the next few weeks. </P>
    
    <img src='/static/images/plot_forExpected Goals.png'/>

{% endblock content %}

对于这个问题的任何帮助以及对我的程序/代码的一般建议，我们将不胜感激。

我在同一个问题上经历了许多线程，但所有推荐的调整似乎都不适合我。并且了解我自己，这可能是我忽略的一些小而愚蠢的事情，如果是这样，请提前道歉。

非常感谢。

Answer 1

你可以如下使用url_for

<img src="{{url_for ('static' , filename='images/plot_forExpected Goals.png')}}">

我也不确定这是否是一个问题，但您应该考虑从图片名称中删除空格。