javascript - 在浏览器中显示图像

Question

所以，我试图在已经由其他人制作的数据库中呈现保存在 MSSQL 中的图像。
最初该列是 IMAGE 类型，使用 Sequelize 我转换为 varbinary(MAX)。是的，我丢失了数据，但它仅用于测试
然后我再次插入图像并尝试在我的 fotos.handlebars 上显示它。
结果就是这样:
printResult.png
有没有办法让图像而不是这些字符出现？
我的代码:
模型 Fotos.JS:

const db = require('./db')

const Fotos = db.sequelize.define('Fotos', {
    COD_PESSOA:{
        type: db.Sequelize.INTEGER
    },
    Sequencia:{
        type: db.Sequelize.INTEGER
    },
    Foto:{
        type: db.Sequelize.BLOB
    },
    Padrao:{
        type: db.Sequelize.INTEGER
    }
}, {
    timestamps: false
})

module.exports = Fotos
//Fotos.sync({force: true})

fotos.handlebars:

<h1>Fotos:</h1>

{{#each fotos}}

    <h2>{{dataValues.Foto}}</h2>
    <hr>

{{/each}}

app.js:

const express = require('express')
const app = express()
const handlebars = require('express-handlebars')
const bodyParser = require('body-parser')
const Fotos = require('./models/Fotos')


//template engine
    app.engine('handlebars', handlebars({defaultLayout: 'main'}))
    app.set('view engine', 'handlebars')

//body-parser
    app.use(bodyParser.urlencoded({extended: false}))
    app.use(bodyParser.json())


//Rotas
    app.use('/fotos', (req, res)=>{
       //res.send('teste rota')
       
         Fotos.findAll().then((fotos)=>{
            res.render('fotos', {fotos: fotos})
        }).catch((erro)=>{
            res.send(erro)
        })
        
    })


    app.listen(8081, ()=>{
        console.log('Servidor Rodando')
    })

Answer 1

你有没有试过把你的 blob 作为图像的 src ？在代码中，你把它放在一个 h2 里面，它是文本，所以它会打印 blob 文本，因为它是二进制的，看起来像胡言乱语。

const urlCreator = window.URL || window.webkitURL;
const imageUrl = urlCreator.createObjectURL(dataValues.Foto);
const image = new Image();
image.addEventListener("onload", () => {
  //append the image in your body page
}
image.src = imageUrl;

尝试这样的事情
编辑:
您可以使用 Handlebars 助手将您的 blob 转换为 URL

Handlebars.registerHelper('blobToUrl', function(blob) {
   var urlCreator = window.URL || window.webkitULR;
   var imageUrl = urlCreator.createObjectURL(blob);
   return imageUrl;
 });

然后这样做

<h1>Fotos:</h1>

{{#each fotos}}

    <img src="{{blobToUrl dataValues.Foto}}"></img>
    <hr>

{{/each}}