前后端分离的时候，如何从后端传递图片给前端

最近做了一个项目，其中的场景是，前端通过传递图片，让后端保存。这个项目是前后端分离的，现在想让前端请求后端图片的时候进行显示。

做这个一共有两个思路。

• 返回图片的 url 地址
• 返回图片的图片流数据

url 指向

这个一般在于集成式项目，即不分前后端的项目。给前端传递资源的 url ，然后前端进行显示。或者把图片存到七牛云等服务器上。

但是，在前后端分离中，我目前还不会，传递不同目录下的 url ，这个还需要研究一下，这个应该是正常逻辑。

图片流方法

后端接到前端的请求后，把图片变成base64字节流形式返回，客户端收到这串字节数据，然后通过base64将字节转化为图片。

这种方法有一定缺陷，比如图片不能太大等。

我目前在前后端分离的项目中，用的是这个方法，

先说一下开发平台。

开发平台

• MacBook

我这里贴一下后端代码。

def get_img_stream(img_local_path):
    """
    工具函数:
    获取本地图片流
    :param img_local_path:文件单张图片的本地绝对路径
    :return: 图片流
    """
    import base64
    with open(img_local_path, 'rb') as img_f:
        img_stream = img_f.read()
        img_stream = base64.b64encode(img_stream)
    return img_stream

前端代码

let img = '<img src="data:;base64,' + info.image + '"' + 'alt="" style="width: 100%"/>';

在 img 标签中的 src一定要按照 data:;base64, 的形式添加，否则显示不出图片。

其中 info.image 就是后台传过来的 img_stream。

部署平台

• Ubunut

在 Ubuntu 中，直接使用开发代码，不行，需要对得到的图片流再进行编码操作，转化为 “utf-8”.

我这里贴一下后端代码。

def get_img_stream(img_local_path):
    """
    工具函数:
    获取本地图片流
    :param img_local_path:文件单张图片的本地绝对路径
    :return: 图片流
    """
    import base64
    with open(img_local_path, 'rb') as img_f:
        img_stream = img_f.read()
        img_stream = base64.b64encode(img_stream).decode("utf-8")
    return img_stream

上面的代码，我目前在

• MacBook
• ubuntu

都可以用，推荐使用这个。