2017-02-08 2 views
0

ich folgenden node.js/Express.js Server bin mit,Kann nicht html Bild lädt mit localhost node.js/Express.js Server

index.js:

const express = require('express'); 
const path = require('path'); 

const app = express(); 

app.get('/', function(req, res) { 
    res.sendFile(path.join(__dirname + '/index.html')); 
}); 

app.listen(8000, function() { 
    console.log('Listening on port: 8000!'); 
}); 

und dem folgenden hTML-Datei,

index.html:

<!doctype html> 
<html> 
<head> 
    <title>Will Alley</title> 
</head> 
<body> 
    <style type="text/css"> 
     img { 
      width: 100%; 
      height: 100%; 
     } 
    </style> 
    <h2 id="myName">Will Alley</h2> 
    <img src="./DSC_1546_700_464.jpg" alt="an image."> 
</body> 
</html> 

alle meine Dateien (index.js, index.html, DSC_1546_700_464.jpg) sind im gleichen Verzeichnis.

Wenn ich meinen Server starte und zu "localhost: 8000" navigiere, wird nur die Überschrift und der Bildalptxt angezeigt.

Jede Hilfe wird sehr geschätzt.

Antwort

0

Sie haben nur eine Route in Express, die für '/'.
Unten sind zwei Ergänzungen, eine, die Ihre spezifische Frage beantwortet, indem Sie app.use(express.static(__dirname)) hinzufügen, was gefährlich ist. Der sicherere Weg ist, etwas wie app.use('/images',express.static(__dirname+'/images')) zu verwenden, um nur bestimmte Unterverzeichnisse zu bedienen, in denen Sie servierbares Zeug einsetzen.

const express = require('express'); 
const path = require('path'); 

const app = express(); 

app.get('/', function(req, res) { 
res.sendFile(path.join(__dirname + '/index.html')); 
}); 
// Static route for files in the current directory... 
// Note that this serves all files relative to the given 
// path, even ones you probably don't want. 
app.use(express.static(__dirname)); 

// Note: you should really put these files in a subdirectory 
// And use static like this: 
app.use('/images', express.static(__dirname +'/images'));  

app.listen(8000, function() { 
    console.log('Listening on port: 8000!'); 
}); 
+0

Ich habe ein Bilder Unterverzeichnis hinzugefügt und verwendet statisch wie Sie empfohlen, aber das Problem besteht weiter. (Ich aktualisierte auch den Dateipfad in meinem HTML) – walley

+0

Missachtung, ich hatte eine Art in den Änderungen, Ihre Antwort arbeitete, danke! – walley