Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

O Node não consegue encontrar imagens e icones

Fui adaptando a aplicação final do curso, alterei a home.ejs para que representasse uma tela de entrada com um form básico de email e senha, e incluí nela um css, uma image e uns ícones .

Coloquei a imagem em app/public/img e os icones em app/public/icons

No express está definido que os recursos estáticos estarão em /app/public:

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

E isso está funcionando pois o css é carregado e aplicado. O css está em /public/css. Posso ver isso pois estão aplicados todos os efeitos e cores previstos aos campos. E se comento a linha do express.js esses efeitos desaparecem.

Mas...classes do css definem a imagem para :

h1.logo a{
    display:inline-block;
    height:96px;
    width:69px;
    overflow:hidden;
    background:url("../app/public/img/logo.png");
    background-repeat:repeat
}

E os icones tambem:

form .input-icon.icon-username{
    background:url("../app/public/icons/icon-username.png");
    background-repeat:repeat
}

Quando executo a página carrega corretamente mas a imagem (logo) e os ícones não aparecem e no console aparece um caminho que aparenta estar correto, mas diz que os recursos não foram encontrados:

GET http://localhost:3000/app/public/img/logo.png 404 (Not Found)
GET http://localhost:3000/app/public/icons/icon-username.png 404 (Not Found)
GET http://localhost:3000/app/public/icons/icon-password.png 404 (Not Found)

E eles estão exatamente nesses caminhos. Que estou fazendo errado? Preciso criar uma route mesmo que tenha definido o caminho dos recursos estáticos?

Já tentei deixar só o caminho interno do public assim:

background:url("img/logo.png");

Mas o node continua dizendo que não encontra e monta a url como

GET http://localhost:3000/css/img/logo.png 404 (Not Found)

indicando que estou posicionado dentro do css e não do public;

1 resposta
solução!

Aqui, background:url("../app/public/img/logo.png"); deixa o caminho absoluto.

background:url("/img/logo.png");