在浏览器中显示图像

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}}

在浏览器中显示图像

Display image in browser

javascript

sql-server

node.js

express

sequelize.js