通过Angular组件中的innerHTML插入的base64编码图像的显示大小增加

Question

我正在Angular组件上显示我的本地开发系统中的flask api返回的base64编码的PNG图像。但这会导致分辨率降低，而且我无法增加图像的大小。是否有任何解决方法，或者我在做什么错了？

烧瓶代码

@app.route("/showImage")
def Obj_image():
    for img in glob.glob("./input_process/*.png"):
        img = mpimg.imread(img)
        print(img)
    plt.imshow(img)
    plt.axis('off')
    buf = BytesIO()
    plt.gcf()
    plt.savefig(buf, format='png')
    buf.seek(0)
    string = base64.b64encode(buf.read())
    uri = 'data:image/png;base64,' + urllib.parse.quote(string)
    html = '<img src = "%s"/>' % uri
    return html 

角度HTML代码

<div class="main-div">
<mat-card class="example-card">
        <mat-card-header>
          <mat-card-title class="heading"><h1>Uploaded Workflow</h1></mat-card-title>
     </mat-card-header>
     <mat-card-content [style.overflow]="'auto'" [style.height.px]="'600'">
        <span id="object-image" [innerHTML]="str | safe" class="e2e-inner-html-bound"></span>
     </mat-card-content>
    </mat-card>

Displayed Image