无法将图像呈现为 HTML 页面

Question

我使用 Node.js Express Js 创建了一个 Curd Web 应用程序。我能够从数据库中检索除图像文件之外的所有详细信息。

Server.js

：

const express = require('express');
const path =require('path');
const morgan = require('morgan');
const dotenv = require('dotenv');
const connectDB = require('./server/database/connection');
const serProvModel = require('./server/model/serviceProvider')
const bcrypt =require('bcryptjs');
const { response } = require('express');
const jwt = require('jsonwebtoken')
const session = require('express-session')

const app = express();

// app.use(bodyParser.json());
app.use(express.json());
app.use(express.urlencoded({ extended: true}));
app.disable('etag');

app.use(
    session({
        secret: "My Secret Key",
        saveUninitialized: true,
        resave: false,
    })
);

app.use((req, res, next)=> {
    res.locals.message = req.session.message;
    delete req.session.message;
    next();
})

// Assigning a PORT
dotenv.config({path:'config.env'});

const JWT_SECRET= process.env.JWT_SECRET;

const PORT=process.env.PORT || 3000;

// Morgan Module--log request
app.use(morgan('dev')); 


// Database coonection
connectDB();

// app.use(express.static("uploads"));

app.set('view engine', 'ejs');

// load assets
app.use('/css', express.static(path.resolve(__dirname, "assets/css")));
app.use('/img', express.static(path.resolve(__dirname, "assets/img")));
app.use('/js', express.static(path.resolve(__dirname, "assets/js")));
app.use('/', express.static(path.join(__dirname, 'views')));

app.use('/uploads', express.static('uploads'));

app.listen(PORT, ()=> {console.log('Server is running on', PORT)})

route.js

：

const express = require('express');
const route = express.Router();
const services = require('../services/render');
const AuthController = require('../controller/authController');
const Accomodation = require('../model/accomodation');
const multer = require('multer');
const mongooseValidationErrorHandler = require('mongoose-validation-error-message-handler');
const accomodation = require('../model/accomodation');
const { off } = require('../model/serviceProvider');


// image upload
var storage = multer.diskStorage({
    destination: function(req, file, cb){
        cb(null, './uploads');
    },
    filename: function(req, file, cb){
        cb(null, file.fieldname+'_'+ Date.now()+'_'+file.originalname);
    },
});

var upload = multer({
    storage: storage,
}).single('image');


// Accommodation inserting 
route.post('/add-accomodation', upload, (req, res) =>{
    const accomodation = new Accomodation({
    serviceProvider:req.body.serviceProvider,
    title: req.body.title,
    description: req.body.description,
    otherdesc: req.body.otherdesc,
    location: req.body.location,
    image: req.file.filename,
    price: req.body.price,
    category: req.body.category,
    phone: req.body.phone,
    availabilty: req.body.availabilty,

    });

    accomodation.save(accomodation)
    .then(data=> {
        
        req.session.message= {
            type: 'Success',
            message: 'Service created successfully'
        }; res.redirect('/dashboard/accomodation');
        // console.log(message);
    })
    .catch(err =>{
        const error = mongooseValidationErrorHandler(err);
        console.log(error);
        res.status(500).send({
            message:err.message || "Error in creating"
        })
    })
    // accomodation.save((err) =>{
    //     if(err){
    //         res.json({message:err.message, type:'dange'});
    //     }else{
    //         req.session.message= {
    //             type: 'Success',
    //             message: 'Service created successfully'
    //         };
    //         res.redirect('/dashboard/accomodation')
        
    //     }
    // })
})

/**
 * @description Root route
 * @method GET
 */
route.get('/dashboard/accomodation', (req, res)=>{

    if(req.query.id){
        const id = req.query.id;
        Accomodation.findById(id).then(data=>
            {
                if(!data){
                    res.status(404).send({message: "Service not Found"})
                }else{
                    res.send(data)
                }
            })
            .catch(err =>{
                res.status(500).send({message: "Error retrieving service by ID"})
            })
    }else{
        Accomodation.find().then(accomodation=>{
            res.render('accomodation', {title: 'Accomodations- Leisure Diary', accomodation: accomodation});
            
        })
        .catch(err=>{
            res.status(500).send({message:err.message || "Error on getting all the data"});
        })
    }

创建表单页面：

<%- include('include/_header') %>

<div class="container form-container">
    <div class="row">
        <div class="col-md-5 mx-auto mt-3">
            <div class="card shadow">
                <div class="card-header bg-primary">
                    <h3 class="text-light">
                        Add new Service
                    </h3>
                </div>
                <div class="card-body  p-2">
                    <!-- route name -->
                    <form action="/add-accomodation" method="post" id="add-form" enctype="multipart/form-data">

                        <div class="mb-2">
                            <label for="title">Title</label>
                            <input type="text" name='title' class="form-control form-control-sm" placeholder="Enter Title" required/>
                        </div>
                        <div class="mb-2">
                            <label for="description">Description</label>
                            <input type="text" name='description' class="form-control form-control-sm" placeholder="Enter Main Description" required/>
                        </div>
                        <div class="mb-2">
                            <label for="otherdesc">Other Description</label>
                            <input type="text" name='otherdesc' class="form-control form-control-sm" placeholder="Enter Other Description" required/>
                        </div>
                        <div class="mb-2">
                            <label for="location">Location</label>
                            <input type="text" name='location' class="form-control form-control-sm" placeholder="Select Locaiton" required/>
                        </div>
                        <div class="mb-2">
                            <label for="price">Price</label>
                            <input type="text" name='price' class="form-control form-control-sm" placeholder="Enter Rate" required/>
                        </div>
                        <div class="mb-2">
                            <label for="availability">Availability</label>
                            <input type="text" name='availability' class="form-control form-control-sm" placeholder="Select date" required/>
                        </div>
                        <div class="mb-2">
                            <label for="serviceProvider">Service Provider</label>
                            <input type="text" name='serviceProvider' class="form-control form-control-sm" placeholder="Service Provider" required/>
                        </div>
                        <div class="mb-2">
                            <label for="category">Category</label>
                            <input type="text" name='category' class="form-control form-control-sm" placeholder="Category" required/>
                        </div>
                        <div class="mb-2">
                            <label for="phone">Phone</label>
                            <input type="text" name='phone' class="form-control form-control-sm" placeholder="Phone" required/>
                        </div>
                        <div class="mb-2">
                            <label for="image" class="form-lable">Select Image</label>
                            <input type="file" name='image' id="image" class="form-control form-control-sm" required/>
                        </div>
                        <div class="mb-3 d-grid">
                            <input type="Submit" name="submit" value="Create Service" class="btn btn-primary btn-md">
                        </div>

                    </form>
                </div>
            </div>
            
        </div>
    </div>
</div>

<%- include('include/_footer') %> 

HTML 页面 - 表格（使用 EJS）：

<tbody>
    <% accomodation.forEach((row, index) => { %>
        <tr>
            <td><%= index %></td>
            <td><img src="<%= row.image %>" width="50" class="img-thumbnail" alt="Image Loading..."> </td>
            <td><%= row.title %></td>
            <td><%= row.description %></td>
            <td><%= row.otherdesc %></td>
            <td><%= row.phone %></td>
            <td><%= row.location %></td>
            <td><%= row.price %></td>
            <td><%= row.availability %></td>
            <td><%= row.serviceProvider %></td>
            <td><a href="/edit-accomodation/<%= row.id %>" class="text-success"><i class="fas fa-edit fa-lg mx-1 "></i></a>
                                    <a href="/delete-accomodation/<%= row.id %>"  class=""><i class="fa-sharp fa-solid fa-trash " style="color:red"></i></a>
            </td>
        </tr>
        <% }) %>
    </tbody>
</table>
<% } else {%>
    <h2 class="text-center text-secondary mt-3"> No services found</h2>
<% } %>

我检查了控制台，它显示了这些输出：

有人能指出我这段代码中的错误吗？

Answer 1

应替换为