Блог

Главная - Вопросы по программированию - Изображение не отображается в ejs

Изображение не отображается в ejs

#javascript #node.js #mongoose #ejs #multer

Вопрос:

У меня есть простое приложение, которое получает заголовок, описание и изображение от пользователя 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'); -%>

Вот ошибка.
Здесь она хранится в общей папке внутри загрузок
Извините, если код слишком длинный.

Комментарии:

1. Вы пробовали <img src=»/загрузки/<%=item.img%>» alt=»изображение»<%=item.img%>> (начиная путь с ‘/’)

2. да, я пытался, но это не сработало. Есть какое-нибудь другое решение?

Ответ №1:

Попробуйте добавить «общедоступный» для имени статической папки

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

Или, если вы хотите использовать __dirname,

 app.use(express.static(path.join(__dirname, 'public')))

Комментарии:

1. Спасибо, я просто хочу спросить, как я создал статическую общую папку, было неправильно???

2. Нет, в своем коде вы добавили «./public/» для имени папки. Это неверно. Потому что, когда вы соедините его с __dirname, он вернется как «Некоторый файл/./public/»

Метки: