Imej yang dipaparkan menggunakan Flask adalah salah atau rosak

Question

Saya sedang menyediakan aplikasi web di mana saya perlu memaparkan beberapa imej. Imej yang saya terima daripada API menukar plot matplotlib kepada png dan kemudian menghantarnya ke aplikasi web utama menggunakan perpustakaan io. Oleh itu, imej yang saya paparkan pada halaman hampir selalu kelihatan tidak betul atau salah. Tetapi jika saya membukanya dalam halaman baharu melalui menu konteks, ia berfungsi dengan baik.

Jadi kod ini untuk menghantar gambar

@app.route('/send-data-a', methods=['GET'])
def send_data_user_dynamic():
...some code for diagram...
image_stream1 = io.BytesIO()
        plt.savefig(image_stream1, format='png')
        image_stream1.seek(0)
        plt.close(fig)

        return send_file(image_stream1, mimetype='image/png')

Saya cuba meletakkan cap masa dalam apl utama supaya pautan itu unik tetapi itu tidak membantu

@app.route('/data', methods=['GET'])
def data():
    timestamp = int(time.time())

    user_dynamic = requests.get(f'http://127.0.0.1:5000/send-data-a?timestamp={timestamp}')
    user_amount = requests.get(f'http://127.0.0.1:5000/send-data-b?timestamp={timestamp}')
    kp_month = requests.get(f'http://127.0.0.1:5000/send-data-c?timestamp={timestamp}')
    kp_week = requests.get(f'http://127.0.0.1:5000/send-data-d?timestamp={timestamp}')

    return render_template('second.html',
                           user_dynamic=user_dynamic.url,
                           user_amount=user_amount.url,
                           kp_month=kp_month.url,
                           kp_week=kp_week.url)
if __name__ == '__main__':
    app.run(debug=True, port=5001)

Dan terdapat templat html untuk mengeluarkannya

<div class="diagram">
        <img src="{{ user_dynamic }}" alt="user_dynamic">
        <figcaption>some text</figcaption>
    </div>

Answer 1

import base64

user_dynamic_response = requests.get('http://127.0.0.1:5000/send-data-a')
user_amount_response = requests.get('http://127.0.0.1:5000/send-data-b')
kp_month_response = requests.get('http://127.0.0.1:5000/send-data-c')
kp_week_response = requests.get('http://127.0.0.1:5000/send-data-d')

user_dynamic_image_data = base64.b64encode(user_dynamic_response.content).decode('utf-8')
user_amount_image_data = base64.b64encode(user_amount_response.content).decode('utf-8')
kp_month_image_data = base64.b64encode(kp_month_response.content).decode('utf-8')
kp_week_image_data = base64.b64encode(kp_week_response.content).decode('utf-8')

return render_template('second.html',
                       user_dynamic=user_dynamic_image_data,
                       user_amount=user_amount_image_data,
                       kp_month=kp_month_image_data,
                       kp_week=kp_week_image_data)

Jadi eh kod ini menyelesaikan masalah