reactjs - 将多个图像从 python 服务器发送到 react 前端

Question

我正在尝试将 2 个 png(或 jpeg 或任何其他格式)图像从我的 Flask 服务器发送到我的 Reactjs 前端以在那里显示它们。但我不确定如何编码这个响应。我得到的最接近的是人们建议将图像附加到多部分表单并发送表单，但我不太清楚如何解析前面的表单，因为response.data是一个字符串。

我知道这甚至可能不是在通常用于发送到服务器而不是从服务器上构建多部分表单的正确方法，因此我将不胜感激任何更正!

from flask import Flask, Response
from requests_toolbelt import MultipartEncoder


{...}

# getting the images
        bytes_object_rest = do_plot(rest_coordinate_arrays, rest_vcg_arrays)
        bytes_object_stress = do_plot(stress_coordinate_arrays, stress_vcg_arrays)

]
       mpencoder = MultipartEncoder(
            fields={'rest_graph': ('rest.png', bytes_object_rest, 'image/png'),
                    'stress_graph': ('stress.png', bytes_object_stress, 'image/png')},
            )

    return Response(mpencoder.to_string(), mimetype=mpencoder.content_type)

最后，我想知道如何让 Flask 端点公开 2 个 .png 图进行 react ，以及如何解析该响应，以便我可以在前面渲染这 2 个图。非常感谢! [ ]

1

Answer 1

在Python中将图像编码为base64:

import base64

with open("yourfile.ext", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read())

在js中解码图像:

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';