5

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 %>
TheSMITHExperience
  • 51
  • 1
  • 1
  • 5
  • 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 Feb 01 '17 at 22:56
  • Why do you show `/public/ggcbear.jpg` in one place and `/ggcbear.jpg` in another place? – jfriend00 Feb 01 '17 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 tag. – TheSMITHExperience Feb 02 '17 at 02:08

1 Answers1

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">
dNitro
  • 5,145
  • 2
  • 20
  • 45