Fornire una pagina HTML statica contenente un’immagine utilizzando Node JS / Express

Sono in grado di pubblicare pagine HTML statiche tramite express. Ho anche installato “ejs” per rendere la pagina con dati da variabili locali nel mio file .js. Ho solo bisogno di visualizzare un piccolo logo nell’angolo della pagina insieme al resto dei dati. L’apertura solo del file html nel browser carica l’immagine bene, ma con il server ottengo un’immagine spezzata. Penso che potrebbe essere un problema con il mio percorso del file o la struttura della directory. Ecco il mio codice semplice originale senza i tentativi inutili:

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

   <input id="name" value="  " />
<input id="power" value=" "/>

Non ho incluso la riga img src in modo che tu possa darmi la linea completa, a volte le persone trascurano i miei sottili errori di syntax. Rispetto alla struttura delle directory, ho solo questo file “server.js” nella mia cartella / home e l’indice. html ‘file in / home / viste


Soluzione offerta da Ploutch: ho spostato il logo.jpg in una cartella ‘/ images’ che ho creato sotto ‘/ home’ Ho appena aggiunto queste righe –

server.js

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

index.html

  

Dato che sto usando ejs per rendere la pagina con variabili locali, se inserisco il logo.jpg nella directory corrente invece di una cartella di immagini separata, l’immagine viene caricata correttamente ma l’output di “nome” e “potenza” verrà interrotto.

È necessario servire i file delle risorse (immagini, js, css, …) in modo statico.

Per fare questo, metterli in una sottodirectory, quindi aggiungere questo prima di server.listen

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

(Supponendo che public sia il nome della cartella contenente i file statici)

Quindi, assumendo che la tua immagine si chiami logo.png puoi chiamarla così: