node.jsのフォルダから画像を読み取れません

Question

"/ public/images"パスに画像を配置しました。今すぐ私が望むように私はURLを得ています。しかし、WebブラウザにそのURLを貼り付けるとすぐに、GET /public/images/food-1-xxhdpi.pngと表示されます。だから私はそれを処理する別のAPIを書く必要がありますか？

メインファイルが

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

この行をapp.js

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

マップのWebアプリケーションのルートに/public/imagesフォルダ内の静的コンテンツ。要求がでピックアップすることができるように

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

：だから要求/public/images/food-1-xxhdpi.pngは唯一の完全なパスが.../public/images/public/images/food-1-xxhdpi.png

ある場合は、/food-1-xxhdpi.pngのリクエストをしなければならないのいずれかまたはのようなものにコードの行を変更し動作しますあなたは/my-virtual-directory

を作成することを選択したので...この場合、あなたのファイルが/my-virtual-directory/food-1-xxhdpi.png

明らかになり、これまで何を、あなたはまだ作るためにこれを行うことができますhttps://expressjs.com/en/starter/static-files.html

Answer 2

あなたがバックエンドを試すことができますが、次のようになります。ここでは特急のための静的ミドルウェア詳細は

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

：それはあなたが内部的にそれを持っているのと同じ方法に外部にマッピングします。次に、フロントエンド用途

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

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

Answer 3

試行のように、この抽出数：

バックエンド：

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

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

フロントエンド：

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

Answer 4

私は現在のプロジェクトに取り組んでいますし、次のコードスニペットは、私のために正常に動作：

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

と私は.hbsでこれに到達しようとすると、それは同じくらい簡単です：

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