图像不在 ejs 中呈现
Image Not Rendering in ejs
我有一个简单的应用程序,它从用户那里获取标题、描述和图像 multer
处理图像上传部分,我在名为 public 及其子文件夹上传。然后它在数据库中被脚趾。我在数据库中找到它并尝试渲染图像,但图像未渲染。虽然它存在于上传文件夹中,但它没有渲染。
这是我的代码。
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const mongoose = require("mongoose");
const multer = require("multer");
const fs = require("fs");
const path = require("path");
//APP use
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname+"./public/"));
//Multer Setup
const storage = multer.diskStorage({
destination: "./public/uploads/",
filename: (req, file, cb) => {
cb(null, file.fieldname + '_' + Date.now()+path.extname(file.originalname));
}
});
const upload = multer({ storage: storage }).single("img");
//Mongoose Setup
mongoose.connect('mongodb://localhost:27017/project-1', {useNewUrlParser: true, useUnifiedTopology: true}).then(console.log("Successfully connected to the server"));
//Routes
app.get("/", (req, res)=>{
BlogModel.find({}, function(err, foundItem){
if(err){
console.log(err);
}else{
console.log(foundItem);
res.render("home", {foundItem : foundItem});
}
})
});
app.get("/creat", (req, res)=>{
res.render("creat");
});
app.post("/creat", upload ,(req, res)=>{
const data = new BlogModel({
heading: req.body.name,
desc: req.body.desc,
img: req.file.filename
});
data.save((err)=>{
if(!err){
res.redirect("/");
}else{
console.log(err);
}
});
console.log("Successfully Submited The Form");
});
//Database Schema
const Blogschema = new mongoose.Schema({
heading: String,
desc: String,
img: String
});
//Database Model
const BlogModel = new mongoose.model("Image", Blogschema);
//Listen On Port 3000
app.listen(3000, ()=>{
console.log("Listening on port 3000");
});
<%- include('partials/header'); -%>
<% foundItem.forEach(function(item){ %>
<h1><%= item.heading %></h1>
<p><%=item.desc%></p>
<img src="./uploads/<%=item.img%>" alt="image">
<%})%>
<%- include('partials/footer'); -%>
Here it is stored in the public Folder inside Uploads
Here is the error.
抱歉,如果代码太长。
尝试为静态文件夹名称添加 'public'
app.use(express.static("public"));
或者如果您想使用 __dirname,
app.use(express.static(path.join(__dirname, 'public')))
我有一个简单的应用程序,它从用户那里获取标题、描述和图像 multer
处理图像上传部分,我在名为 public 及其子文件夹上传。然后它在数据库中被脚趾。我在数据库中找到它并尝试渲染图像,但图像未渲染。虽然它存在于上传文件夹中,但它没有渲染。
这是我的代码。
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const mongoose = require("mongoose");
const multer = require("multer");
const fs = require("fs");
const path = require("path");
//APP use
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname+"./public/"));
//Multer Setup
const storage = multer.diskStorage({
destination: "./public/uploads/",
filename: (req, file, cb) => {
cb(null, file.fieldname + '_' + Date.now()+path.extname(file.originalname));
}
});
const upload = multer({ storage: storage }).single("img");
//Mongoose Setup
mongoose.connect('mongodb://localhost:27017/project-1', {useNewUrlParser: true, useUnifiedTopology: true}).then(console.log("Successfully connected to the server"));
//Routes
app.get("/", (req, res)=>{
BlogModel.find({}, function(err, foundItem){
if(err){
console.log(err);
}else{
console.log(foundItem);
res.render("home", {foundItem : foundItem});
}
})
});
app.get("/creat", (req, res)=>{
res.render("creat");
});
app.post("/creat", upload ,(req, res)=>{
const data = new BlogModel({
heading: req.body.name,
desc: req.body.desc,
img: req.file.filename
});
data.save((err)=>{
if(!err){
res.redirect("/");
}else{
console.log(err);
}
});
console.log("Successfully Submited The Form");
});
//Database Schema
const Blogschema = new mongoose.Schema({
heading: String,
desc: String,
img: String
});
//Database Model
const BlogModel = new mongoose.model("Image", Blogschema);
//Listen On Port 3000
app.listen(3000, ()=>{
console.log("Listening on port 3000");
});
<%- include('partials/header'); -%>
<% foundItem.forEach(function(item){ %>
<h1><%= item.heading %></h1>
<p><%=item.desc%></p>
<img src="./uploads/<%=item.img%>" alt="image">
<%})%>
<%- include('partials/footer'); -%>
Here it is stored in the public Folder inside Uploads Here is the error. 抱歉,如果代码太长。
尝试为静态文件夹名称添加 'public'
app.use(express.static("public"));
或者如果您想使用 __dirname,
app.use(express.static(path.join(__dirname, 'public')))