admin管理员组

文章数量:1220949

Very new to MEAN Stack and I'm using Brackets to edit .ejs views for a simple form app using Express tutorial. I'm trying load a static image and it just won't load. I'm getting GET /public/ggcbear.jpg 404 from app.js (terminal). I also created a image.ejs views to handle the load...but thats not working. My .jpg is listed in the folder: public. What syntax is wrong in my code/.ejs files?

Part of my 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...

my 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 -->
          <!-- / -->

          <link rel="stylesheet" href=".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>

my image.ejs

<% include header %>

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

Very new to MEAN Stack and I'm using Brackets to edit .ejs views for a simple form app using Express tutorial. I'm trying load a static image and it just won't load. I'm getting GET /public/ggcbear.jpg 404 from app.js (terminal). I also created a image.ejs views to handle the load...but thats not working. My .jpg is listed in the folder: public. What syntax is wrong in my code/.ejs files?

Part of my 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...

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

my image.ejs

<% include header %>

    <div>
        <h3><img src="/ggcbear.jpg", alt="Testing Image")</h3>
    </div>
 <% include footer %>
  • javascript
  • node.js
  • express
  • embedded-javascript
Share Improve this question asked Feb 1, 2017 at 22:53 TheSMITHExperienceTheSMITHExperience 511 gold badge1 silver badge5 bronze badges 3
  • 2 Is the image available at the /public/ggcbear.jpg url? app.use(express.static('public')); this line should make things in the /public directory available. i usually use the app.use('/public', express.static(path.join(__dirname, 'public'))) syntax – Jon Commented Feb 1, 2017 at 22:56
  • Why do you show /public/ggcbear.jpg in one place and /ggcbear.jpg in another place? – jfriend00 Commented Feb 1, 2017 at 23:15
  • Is the image available at the /public/ggcbear.jpg url...don't thinks so. It is just an jpg file inside the public folder in my file tree. It's on my hard drive. Not pulling it from the web. I stated that I even tried creating a separate image.ejs file to get the image to load. Mainly bc I thought I needed to create another "view" ejs file. The ggcbear.jpg file is in the public folder, which is above view folder. The view folder contains the header.ejs where the html code is and where I'm really trying to code the <img> tag. – TheSMITHExperience Commented Feb 2, 2017 at 2:08
Add a comment  | 

1 Answer 1

Reset to default 18

Using the following static middleware:

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

and the following folder structure:

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

your ggcbear.jpg will serve from /images/ggcbear.jpg:

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

本文标签： javascriptExpressNodejs Can39t get Image to loadStack Overflow

版权声明：本文标题：javascript - Express + Node.js Can&#39;t get Image to load - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1739288101a2156561.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。