javascript - img 标签不会从后端显示 src base64
问题描述
我有来自后端的 base64 图像格式,我希望它使用 img 标签显示在前端
这是代码
router.get('/image_front/:id', function(req, res){
Delivery.findById(req.params.id, function(err, x){
if(err){
res.send({'error': err})
}else{
let v = 'data:image/png;base64'+', '+ new Buffer.from(x.image_front.data).toString('base64')
res.send(v)
}
})
})
对于前端
<img id="sample" src="/image_front/<%=x._id%>" />
当图像源激活链接返回数据:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAA .. 当我将图像复制并粘贴到 w3schools 以检查数据没有损坏时,它可以工作。似乎数据有效,但不会使用图像标签显示。我不知道出了什么问题。
解决方案
只有在 html 中嵌入图像数据时才需要 base64 字符串编码。
要直接将图像传递给客户端,请返回具有正确内容类型的数据。
router.get('/image_front/:id', function(req, res){
Delivery.findById(req.params.id, function(err, x){
if(err){
res.send({'error': err})
} else {
res.type('png')
res.send(x.image_front.data)
}
})
})
推荐阅读
- opengl - 如何使用 cmake 在 OSX 上链接 libGL?
- postgresql - 无法使用 TypeORM 在 Postgres 中设置 uuid 或枚举字段的值
- jquery - Fullcalendar 未定义 - Rails 6
- r - 如何根据另一个变量的值计算 R 中的变量?
- javascript - discord.js 对播放功能的反应
- javascript - 使用 Jquery 添加多个输入不起作用
- redux - 组合来自商店树不同部分的数据并调度操作?
- javascript - 在 setTimeout 内调用 vuex 存储
- json - Grep command questions - Grep text from program output?
- readme - 如何在 README.md 文件中插入水平线