Express + Node.js Не удается загрузить изображение

Очень новичок в MEAN Stack, и я использую скобки для редактирования представлений .ejs для простого приложения формы с помощью учебника Express. Я пытаюсь загрузить статическое изображение, но оно не загружается. Я получаю GET /public/ggcbear.jpg 404 из app.js (терминал). Я также создал представления 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>

мой image.ejs

<% include header %>

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

node.js javascript express embedded-javascript
person TheSMITHExperience    schedule 01.02.2017    source источник
comment
Доступно ли изображение по URL-адресу /public/ggcbear.jpg? app.use (express.static ('общедоступный')); эта строка должна сделать доступными вещи в каталоге / public. я обычно использую синтаксис app.use ('/ public', express.static (path.join (__ dirname, 'public')))   -  person Jon    schedule 02.02.2017
comment
Почему вы показываете /public/ggcbear.jpg в одном месте и /ggcbear.jpg в другом?   -  person jfriend00    schedule 02.02.2017
comment
Доступно ли изображение по URL-адресу /public/ggcbear.jpg ... не думаю. Это просто файл в формате jpg в общей папке в моем дереве файлов. Это у меня на жестком диске. Не вытаскивая из сети. Я заявил, что даже пытался создать отдельный файл image.ejs для загрузки изображения. В основном bc. Я думал, что мне нужно создать еще один файл представления ejs. Файл ggcbear.jpg находится в общей папке, которая находится над папкой просмотра. Папка просмотра содержит header.ejs, где находится код html и где я действительно пытаюсь закодировать тег ‹img›.   -  person TheSMITHExperience    schedule 02.02.2017

Ответы (1)


arrow_upward
15
arrow_downward

Использование следующего статического промежуточного программного обеспечения:

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">
person dNitro    schedule 02.02.2017