Site with node js and express / ejs does not always load images

Question

I set up a website that basically uses Nodejs to fetch the image and after that sends it to ejs to display on the page, what happens is that sometimes the image appears and sometimes it looks like the website loads before the image can be loaded by the node. I left the two ways I tried, one commented and the other that was the last one I tried. This is app.js

function retornaImagens(id){
let imagens= {
    assPacUrl: ''
}
/*
if (fs.existsSync(`${__dirname}\\arquivos\\consultas\\${id}\\assPac.png`)) {
    fs.readFile(
        `${__dirname}\\arquivos\\consultas\\${id}\\assPac.png`, 'base64',
        (err, base64Image) => {
            if (err) {
                console.log(err)
            } else {
                imagens.assPacUrl = `data:image/png;base64, ${base64Image}`
            }
        }
    )
}

*/

fs.access(`${__dirname}\\arquivos\\consultas\\${id}\\assPac.png`,(err)=>{
    if(err){}else{
        fs.readFile(
            `${__dirname}\\arquivos\\consultas\\${id}\\assPac.png`, 'base64',
            (err, base64Image) => {
                if (err) {
                    console.log(err)
                } else {
                    imagens.assPacUrl = `data:image/png;base64, ${base64Image}`
                }
            }
        )
    }
})

return imagens;
}

app.get('/consultas/:id/termo',(req,res)=>{
    var imagens = retornaImagens(req.params.id);

    Consulta.findOne({link:`/consultas/${req.params.id}/login`}).populate('medico paciente').exec((err,consulta)=>{
        if(err){
            console.log(err)
        }else{
            console.log(imagens)
            res.render('consulta/termo',{consulta:consulta,id:req.params.id,imagens})
        }
    })
})

This is the ejs file

<img src="<%= imagens.assPacUrl %>">

If you have tips to make the code cleaner and consume less memory, please send me.

score 0 · Accepted Answer · answered Jun 04 '20 at 23:47

The problem was in the loading time, it was taking longer to load the image so the program continued and rendered the website empty, adding a settimeOut.

function enviaTermo(data){
        Consulta.findOne({link:data.link}).populate('medico paciente').exec((err, consulta) => {
            if (err) {
                console.log(err)
            } else {
                console.log(imagens)
                io.to(consulta._id).emit('termo', { consulta: consulta, imagens: imagens })
            }
        })
    }

    setTimeout(() => {
        enviaTermo(data)
    }, 450);

Site with node js and express / ejs does not always load images

1 Answers1