img 標簽不會從后端顯示 src base64

Question

我有來自后端的 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 以檢查數據沒有損壞時，它可以工作。 似乎數據有效，但不會使用圖像標簽顯示。 我不知道出了什么問題。

Answer 1

僅當您在 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)
        }
    })
})

Answer 2

Base64 編碼根本不是您想要的。 只需返回圖像本身。

res.set('Content-Type', 'image/png');
res.end(x.image_front.data);