Problemas com assets no nodeJS

Pessoal, estou com um problema quanto aos arquivos estáticos e principalmente sobre esse linha de código abaixo (acho que eu faltei adicionar alguma opção nela, mas enfim rsrs):

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

Problema: O express não está carregando as imagens de dentro de public/img/, como mostra o erro abaixo;

Atente para o tooltip que aparece no lado direito da imagem: http://localhost:3000/user/img/jobLogo.svg.

Dúvida: Por que ele está buscando nesse caminho, isto é, por que ele está colocando user aí no meio desse path, sendo que já configurei meu express com esta linha de código app.use(express.static('public')); para deixar todas imagens disponíveis para mim?

Como está a estrutura de pastas no seu projeto?

1 curtida

Assim:

Pelo que li, ao fazer:

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

Vc deve acessar os recursos como se tivesse partindo da pasta public. Exemplo (de acordo com seus arquivos):

http://localhost:3000/img/bar.svg

FONTE: https://expressjs.com/pt-br/starter/static-files.html

Esse arquivo jobLogo.svg está dentro de qual pasta?

Como vc está referenciando esse jobLogo.svg no seu html?

Sim sim

Certo, mas como está o path do arquivo no seu html?

Se liga:

Acontece que o express está colocar user antes de img/jobLogo.svg
Veja o tooltip

Tenta assim: <img src="/img/jobLogo.svg"> (com a barra no início)

Eita barra miserável. kkkkkk, funcionou.

Agora por que esse barra faz a diferença? Porque não entendo aquele user no path que te mostrei.

O user é uma rota do express. Quando tu acessou a rota, o express colocou o user na barra de endereço. Com isso, ao tentar acessar a imagem usando img/jobLogo.svg, sem a barra, indica que o path eh relativo à URL atual, ou seja: user/ + img/jobLogo.svg. Já com a barra, indica o acesso absoluto, partindo da raiz, ou seja: http://localhost:3000 + /img/jobLogo.svg.

1 curtida

Ahhhh entendi agora. Muito obrigado novamente.