首页 > 解决方案 > 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 以检查数据没有损坏时,它可以工作。似乎数据有效,但不会使用图像标签显示。我不知道出了什么问题。

标签: javascriptnode.js

解决方案


只有在 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)
        }
    })
})

推荐阅读