数据库存储图片及传输到前端展示

这两天开发中遇到了一个问题，耽误了不少时间（ 其实还是懒，不想单独写API )。需要实现数据库存储任意图片，blob类型，然后通过json传递到前端，前端渲染展示图片。

找了挺多方法，有的文不对题，比如数据库存储了图片的静态URL；有的试了不行。
自己想了下，大概的思路是:

????

数据库存储blob

服务端读取blob转换为JSON

前端接收JSON并展示

这个 ???? ，也就是前后端传输用什么呢？试过buffer，也就是直接从数据库读取，不行，试过前端用Blob类型重新封装，也不行。
window.URL.createObjectURL()方法也试了。后来看到json不能传二进制，考虑传String。
目前的解决办法是 base64。后端获取数据库数据后，用base64 加密成string

// response 
let obj = { 
	image :  image, // blob/buffer type here
	// other attributes
}

obj.image = obj.image.toString('base64')

return obj

方法1：

<script>
let str = ... // 接收到的base64字符串
let buff = Buffer.from(str,'base64')

let url = window.URL || window.webkitURL
let u = url.createObjectURL(new Blob([buff])) // [] 别漏了
console.log(u) // blob:xxxxxxx 即为可用URL
script>

方法2：

前端接收到后直接可用，以vue为例

// Vue3
<template>
   
	   <image :src="url" />
	   
   
template>
<script>
    //...
    this.url = "data:image/*;base64," + res.image
    //...
script>

收工，做个笔记
如果各位有更好的方法，欢迎留言指教或讨论