Express + Node.jsロードするイメージを取得できません

非常に新しいMEANスタックです。Expressチュートリアルを使用して簡単なフォームアプリケーションの.ejsビューを編集するには、ブラケットを使用しています。私は静的なイメージをロードしようとしているだけで、ロードされません。私はapp.js（端末）から/public/ggcbear.jpg 404を取得しています。また、負荷を処理するためにimage.ejsビューを作成しましたが、それは動作しません。私の.jpgは、public：フォルダにリストされています。私のコード/ .ejsファイルではどのような構文が間違っていますか？ static middleware次の私のapp.jsのExpress + Node.jsロードするイメージを取得できません

パート

var http = require("http"); 
    var path = require("path"); 
    var express = require("express"); 
    var logger = require("morgan"); 
    var bodyParser = require("body-parser"); 

    // Make an express app 
    var app = express(); 

    app.set("views", path.resolve(__dirname, "views")); 
    app.set("view engine", "ejs"); 


    //adding static functionality for images 
    app.use(express.static('public')); 


    // Renders the "image" page (at views/index.ejs) when GETing the URL 
    app.get("/image", function(request, response) { 
    response.render("image"); 
    }); 

    //etc...

私header.ejs

<!-- This header will appear at the top of every page --> 
     <!DOCTYPE html> 
     <html> 
     <head> 
     <meta charset='utf-8'> 
      <title>Express Guestbook</title> 
      <!-- Loads Twitter's Bootstrap CSS from the Bootstrap CDN --> 
      <!-- http://getbootstrap.com/ --> 

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
      </head> 
      <body class ="container"> 

     <!-- my image tag --> 
      <div> 
      <img src="/public/ggcbear.jpg"> 
     </div> 

     <h1> 
      Express Guestbook 
      <a href="/new-entry" class="btn btn-primary pull-right"> 
       Write in the guestbook 
      </a> 
     </h1> 
     </body>  
     </html>

私image.ejs

<% include header %> 

    <div> 
     <h3><img src="/ggcbear.jpg", alt="Testing Image")</h3> 
    </div> 
<% include footer %>

出典

2017-02-01 TheSMITHExperience

を/public/ggcbear.jpgのURLで入手可能なイメージですか？ app.use（express.static（ 'public'））;この行は/ publicディレクトリ内のものを利用できるようにする必要があります。 – Jon

なぜ '/ public/ggcbear.jpg'を1か所に表示するのですか？/ ggcbear（/ public/ggcbear.jpg） .jpg'は別の場所にありますか？ – jfriend00

画像は/public/ggcbear.jpgのURLで入手できますか？そうは思わない。これは、私のファイルツリーのパブリックフォルダ内の単なるjpgファイルです。それは私のハードドライブです。それをウェブから引っ張ってはいけません。私は、イメージをロードするために別のimage.ejsファイルを作成しようとしていると述べました。主に私は別の "ビュー" ejsファイルを作成する必要があると思った。 ggcbear.jpgファイルはパブリックフォルダにあり、これはビューフォルダの上にあります。ビューフォルダには、HTMLコードがあるheader.ejsと実際にタグをコーディングしようとしている場所が含まれています。 – TheSMITHExperience

を使用する：

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

と、以下のフォルダ構造：

. 
├── app.js 
├── public 
│   └── images 
│    └── ggcbear.jpg 
└── view 
    ├── header.ejs 
    └── image.ejs

あなたggcbear.jpgが/images/ggcbear.jpgから機能します：

<img src="/images/ggcbear.jpg">

出典

2017-02-02 11:07:47 dNitro

Express + Node.jsロードするイメージを取得できません

答えて

関連する問題