Express + Node.js无法加载图像 [英] Express + Node.js Can't get Image to load
问题描述
这是MEAN Stack的新手，并且我正在使用括号通过Express教程编辑简单表单应用程序的.ejs视图.我正在尝试加载静态图像，但不会加载.我从app.js(终端)获取GET/public/ggcbear.jpg 404.我还创建了一个image.ejs视图来处理负载...但是那是行不通的.我的.jpg列在以下文件夹中:public.我的code/.ejs文件中什么语法错误?
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?
我的app.js的一部分
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...
我的header.ejs
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>
我的image.ejs
my image.ejs
<% include header %>
<div>
<h3><img src="/ggcbear.jpg", alt="Testing Image")</h3>
</div>
<% include footer %>
推荐答案
使用以下静态中间件:
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">
这篇关于Express + Node.js无法加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
