Image is not displayed when listed on Node Js

Asked

Viewed 1,634 times

3

I am unable to list the saved images on and Ode with express, when I try to list my View does not display the image.

My configuration file:

module.exports = function(){

    //recuperando a biblioteca do express
    var express = require("express");
    //retornando a função da biblioteca do express
    var app = express();
    //setando o ejs com engine view
    app.set('view engine', 'ejs');
    //setando uma caminho para as views
    app.set('views', './app/views');

    var fileUpload = require('express-fileupload');

    //responsavel load automatico dos modulos
    var consign = require('consign');

    //responsavel por capturar os dados do formulario
    var BodyParser = require('body-parser');

    app.use(express.static(__dirname + './app/public'));

    //permite codificação pela url (urlformdata)
    app.use(BodyParser.urlencoded({extended: true}));

    app.use(fileUpload());

    //lendo as rotas e o banco, colocando dentro de app (servidor)
    consign({cwd: 'app'}).include('infra/dbConnection.js').then('models').then('rotas').then('controllers').into(app);


    return app;

}

My View

<html>
    <head>
        <title>Home</title>
    <head>
    <body>
        <h1>Home</h1>
        <table>
            <tr>
                <th>Nome</th>
            <tr>
                <% for(var i=0; i<lista.length; i++) {%>
                <tr>
                    <td>
                        <a href="<%= lista[i].id %>"><%= lista[i].nome %></a>
                        <img src="./public/images/<%= lista[i].imagem %>"  height="42" width="42">
                    </td>
                </tr>
                <% } %>

        </table>
    </body>
</html>

My Rotar

module.exports = function(app){

    app.get('/usuario', function(request, response){
        app.controllers.usuarioController.index(app, request, response);
    });

    app.get('/usuario/adicionar', function(request, response){
        app.controllers.usuarioController.adicionar(app, request, response);
    });

    app.post('/usuario/salvar', function(request, response){
        app.controllers.usuarioController.salvar(app, request, response)
    });

    app.get('/usuario/:id', function(request, response){
        app.controllers.usuarioController.detalhe(app, request, response);
    });

}

My Controller*

module.exports.index = function(app, request, response){    

    //instanciando o retorno da funcao da conexao
    var connection = app.infra.dbConnection();
    //instanciando a model e passando a conexao com parametro
    var usuario = new app.models.Usuario(connection);

    usuario.Listar(function(erro, retorno){
        response.render('usuario/index', { lista: retorno });
    });
    console.log(app.path);
}

module.exports.adicionar = function(app, request, response){
    response.render('usuario/formulario_cadastro');
}

module.exports.salvar = function(app, request, response){

    //instanciando o retorno da funcao da conexao
    var connection = app.infra.dbConnection();
    //instanciando a model e passando a conexao com parametro
    var usuario = new app.models.Usuario(connection);

    var dataForm = request.body;
    var name = request.files.imagem;

    dataForm['imagem'] = name.name;

    console.log(name);
    name.mv('./public/images/' + dataForm.imagem ,function(err){});
    console.log(dataForm);
    usuario.salvar(dataForm);
    response.redirect('/usuario');
}

module.exports.detalhe = function(app, request, response){

    //instanciando o retorno da funcao da conexao
    var connection = app.infra.dbConnection();
    //instanciando a model e passando a conexao com parametro
    var usuario = new app.models.Usuario(connection);

    var id = request.params.id;

    usuario.Detalhe(id, function(erro, retorno){
        response.render('usuario/detalhe', { usuario: retorno });
    });
}

My folder structure inserir a descrição da imagem aqui

javascript node.js express

  • The array lista comes from where?

  • Post the file code usuarioController.js which is the real controller, what you posted was the user’s route file.

  • @Lucashenrique ready put the controller that was missing.

2 answers

2


Voce does not need to put . /public/images/ since the public folder is already defined.

try <img src="images/<%= lista[i].imagem %>" height="42" width="42">

1

When you define something like static (which in this case was the folder public), it gets as publish on the root of your server, so you do not need to set the full path, but from the folder public.

In this case (as already answered by our colleague @jcardoso):

<img src="images/<%= lista[i].imagem %>">

Browser other questions tagged javascript node.js express

You are not signed in. Login or sign up in order to post.