关于将图像的 Arraybuffer 转换为图像并在 html 页面中显示的问题

Question

我有我的js代码

app.get("/", function(req, res) { 
        var sql="SELECT image FROM images WHERE img_id=2"; 
        connection.query(sql, function(err, result){
            if(result.length <= 0)
                message = "Profile not found!";
            console.log(result);
            res.render('image.ejs',{data:result});
   });
    });

并且 image.ejs 代码是：

<html>
    <head>
         <title>Images</title>
    </head>
    <body>
        <%= data %>
    </body>
</html>

当我运行它时，我得到的响应是 [object Object] 但是我需要我的图像才能得到displayed.will你们帮帮我吗？

Answer 1

ArrayBuffer/Buffer 不能作为 img 标签的值，您可以做的是 base64 编码图像并显示它

res.render('image.ejs',{ data: result[0].image.toString('base64') });

现在在你的HTML

<html>
    <head>
         <title>Images</title>
    </head>
    <body>
        <img src='data:image/png;base64,<%= data %>' />
    </body>
</html>

如果您的图像有不同的扩展名，您可以使用：file-type 对缓冲区进行打包并将图像类型添加到传递给 res.render

的数据中

const imageBuffer = result[0].image;
const { mime } = await FileType.fromBuffer(imageBuffer)

res.render('image.ejs', { data: imageBuffer.toString('base64'), mime });

<img src='data:<%= mime %>;base64,<%= data %>' >

关于将图像的 Arraybuffer 转换为图像并在 html 页面中显示的问题

Issue regarding converting of Arraybuffer of image to image and displaying it in html page

ejs

node.js

arraybuffer