Express + Node.js 无法加载图像答案

【问题标题】：Express + Node.js Can't get Image to loadExpress + Node.js 无法加载图像
【发布时间】：2017-02-01 22:53:08
【问题描述】：

对 MEAN Stack 非常陌生，我正在使用 Brackets 使用 Express 教程为一个简单的表单应用程序编辑 .ejs 视图。我正在尝试加载静态图像，但它不会加载。我从 app.js（终端）获得 GET /public/ggcbear.jpg 404。我还创建了一个 image.ejs 视图来处理负载……但这不起作用。我的 .jpg 在文件夹中列出：public。我的代码/.ejs 文件中有什么语法错误？

我的 app.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>

我的图片.ejs

<% include header %>

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

【问题讨论】：

图片是否在 /public/ggcbear.jpg url 上可用？ app.use(express.static('public'));这一行应该使 /public 目录中的东西可用。我通常使用 app.use('/public', express.static(path.join(__dirname, 'public'))) 语法
为什么你在一个地方显示/public/ggcbear.jpg而在另一个地方显示/ggcbear.jpg？
图片是否在 /public/ggcbear.jpg url 上可用...不要这么认为。它只是我的文件树中公共文件夹中的一个 jpg 文件。它在我的硬盘上。不是从网上拉出来的。我说我什至尝试创建一个单独的 image.ejs 文件来加载图像。主要是因为我认为我需要创建另一个“视图”ejs 文件。 ggcbear.jpg 文件位于 view 文件夹上方的 public 文件夹中。视图文件夹包含 html 代码所在的 header.ejs 以及我真正尝试编写标记的位置。

标签： javascript node.js express embedded-javascript

【解决方案1】：

使用以下static middleware：

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">

【讨论】：