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;