kann Bild aus Ordner in node.js nicht lesen

Question

Ich habe Bilder in "/ public/images" Pfad eingefügt. Jetzt in der Antwort bekomme ich URL wie ich wollte. Aber sobald ich diese URL in den Webbrowser einfüge, heißt es Kann nicht /public/images/food-1-xxhdpi.png. Also sollte ich separate API schreiben, um damit umzugehen?

Hauptdatei app.js

var express = require('express'); 
var mongoose = require('mongoose'); 
var bodyParser = require('body-parser'); 
var app = express(); 
var PORT = 3000; 
var foodtrucklist = require('./controller/foodtrucklist.js'); 
var foodtruck = require('./model/datafoodtruck'); 

var db = mongoose.connect('mongodb://127.0.0.1:27017/quflip'); 

mongoose.connection.once('connected', function() { 
    console.log("Connected to database") 
    foodtruck.save(function(err,foodtrucks){ 
     if (err) res.send(err); 
    }); 
}); 

app.use(bodyParser.urlencoded({extended:true})); 
app.use(bodyParser.json()); 
app.use(express.static(__dirname + '/public/images')); 


app.get('/foodtrucklist',foodtrucklist); 

app.listen(PORT,function() { 
    console.log('express listining on port' + PORT); 
}); 

Answer 1

Diese Zeile

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

Karten der statischen Inhalte im /public/images Ordner an die Wurzel Ihrer Web-Anwendung. So ist die Anforderung /public/images/food-1-xxhdpi.png wird nur funktionieren, wenn der vollständige Pfad ist .../public/images/public/images/food-1-xxhdpi.png

Sie entweder Ihre Anfrage für /food-1-xxhdpi.png machen sollten oder die Codezeile, um so etwas wie zu ändern:

app.use('/my-virtual-directory',express.static(__dirname + '/public/images')); 

so dass Anfragen abgeholt werden können was auch immer Sie /my-virtual-directory

So ... Die Datei wird in diesem Fall /my-virtual-directory/food-1-xxhdpi.png

Offensichtlich machen wählen, können Sie dies tun, um wo es sich von außen auf die gleiche Art und Weise Sie es intern mit haben:

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

Hier weitere Informationen über die statischen Middleware für Express ist: https://expressjs.com/en/starter/static-files.html

Answer 2

Sie können versuchen, sehen wie folgt aus Back-End.

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

Dann Front Verwendung dieser Extrakt Ort wie

<img src="images/your image name" alt="" /> 

Answer 3

Try End:

Backend:

var path = require('path'); 
    var app = express(); 
    var express = require('express'); 

    app.use(express.static(path.join(__dirname, 'public'))); 

Frontend:

<img src="/images/food-1-xxhdpi.png" alt=""> 

Answer 4

Zur Zeit arbeite ich an Projekt und nächsten Code-Snippet für mich adaequat:

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

und wenn ich versuche, dies in .hbs zu erreichen, ist es einfach, wie:

<img src='/images/image.jpg' alt='...' />