在浏览器中显示图像

卢卡斯·特里戈·肖特

所以,我试图在已经由其他人制作的数据库中呈现保存在 MSSQL 中的图像。

最初该列是 IMAGE 类型,使用 Sequelize 我转换为 varbinary(MAX)。是的,我丢失了数据,但它仅用于测试

然后我再次插入图像并尝试在我的 fotos.handlebars 上显示它。

结果就是这样:

打印结果.png

有没有办法让图像而不是这些字符出现?

我的代码:

模型照片.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}}

应用程序.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')
    })

奥塔维奥·高知

你有没有试过把你的 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;

尝试这样的事情

编辑:您可以使用把手助手将您的 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}}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章