Servindo uma página HTML estática que contém uma imagem usando o Nó JS / Express
Sou capaz de servir páginas HTML estáticas usando express. Também instalei o "ejs" para renderizar a página com dados de variáveis locais no meu arquivo .js. Eu só preciso exibir um pequeno logotipo no canto da página, juntamente com o restante dos dados. Abrir apenas o arquivo html no navegador carrega a imagem muito bem, mas com o servidor recebo uma imagem quebrada. Eu acho que pode haver um problema com o caminho do arquivo ou a estrutura de diretórios. Aqui está o meu código simples original sem as tentativas fúteis:
server.js
var express = require ('express');
var fs = require ('fs');
var app = express ();
var bodyParser = require ('body-parser');
app.use (bodyParser ());
var server = require ('http').createServer (app);
app.set('views', __dirname + '/views');
app.engine('.html', require('ejs').__express);
var my_name="Goku";
var my_power=9001;
app.get ('/', function (req, res){
console.log ('GET /');
res.render('index.html',{name:my_name,power:my_power});
});
server.listen (8888);
index.html
<html>
<body>
<input id="name" value=" <%=name%> " /><br>
<input id="power" value=" <%=power%> "/><br>
</body>
</html>
Eu não incluí a linha img src para que você possa me fornecer a linha completa, às vezes as pessoas ignoram meus sutis erros de sintaxe. Em relação à estrutura de diretórios, eu apenas tenho esse arquivo 'server.js' na minha pasta / home e no 'index'. arquivo html 'em / home / views
Solução oferecida pela Ploutch: movi o logo.jpg para uma pasta '/ images' que criei em '/ home'. Apenas adicionei essas linhas -
server.js
app.use(express.static(__dirname + '/images'));
index.html
<img src="/logo.jpg" />
Como estou usando o ejs para renderizar a página com variáveis locais, se eu colocar o logo.jpg no diretório atual em vez de em uma pasta de imagens separada, a imagem carrega bem, mas a saída de "nome" e "energia" será interrompida.