node.js - 对 Angular 组件的图像的 GET 请求返回 404 Not Found
问题描述
我正在尝试从我的 mongodb 数据库中上传和检索图像。我正在使用 multer 进行图像上传,并使用 express 和 mongoose 进行 GET/POST 请求。到目前为止,我已经成功地将图像上传到数据库并使用我的 Angular 服务检索它。我的服务已成功获取图像的数据,即_id、名称和头像值。但是当我尝试在我的组件中显示图像时,它在浏览器控制台中给了我这个错误:
GET http://localhost:3000/public/image-1617990660620.png 404 (Not Found)
我无法弄清楚为什么这条路径不正确。我的图像在公共文件夹中提供。除了这个 404 错误之外,其他一切工作正常。
我的 server.js 文件如下所示:
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const multer = require('multer');
const cors = require('cors');
const passport = require('passport');
const mongoose = require('mongoose');
const dotenv = require('dotenv');
const session = require('express-session');
const multipart = require('connect-multiparty');
const multipartMiddleware = multipart();
//import the database configuration file and connect the server to the db using mongoose
const config = require('./config/db');
mongoose.connect(config.database,{
useNewUrlParser: true,
useUnifiedTopology: true,
useFindAndModify: false,
useCreateIndex: true
});
//initialize app
const app = express();
app.use(cors());
//static files access
app.use(express.static(path.join(__dirname, 'public')));
//initialize bodyparser, passport and exress-session middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(session({
secret: 'keyboard cat',
resave: true,
saveUninitialized: true,
//cookie: { secure: true }
}));
app.use(passport.initialize());
app.use(passport.session());
require('./config/passport')(passport);
//routes
app.use('/users', require('./routes/users')); //main route users which will lead to register and login etc.
app.use('/blogs', require('./routes/users'));
app.use('/gallery', require('./routes/users'));
//port number we use
const port = 3000;
//start server
app.listen(port,
console.log(`Server Running in ${process.env.NODE_ENV} mode on port ${port} and database on ${config.database}`)
);
我的 multer confifuration 以及我的 GET 和 POST 请求:
const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const passport = require('passport');
const jwt = require('jsonwebtoken');
const multer = require('multer');
const User = require('../models/User');
const Post = require('../models/Post');
const Favorites = require('../models/Favorites');
const Gallery = require('../models/Gallery');
const config = require('../config/db');
const path = require('path');
// Multer Storage
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'public');
},
filename: (req, file, cb) => {
console.log(file);
var filetype = '';
if(file.mimetype === 'image/gif') {
filetype = 'gif';
}
if(file.mimetype === 'image/png') {
filetype = 'png';
}
if(file.mimetype === 'image/jpeg') {
filetype = 'jpg';
}
cb(null, 'image-' + Date.now() + '.' + filetype);
}
});
const upload = multer({storage: storage});
router.post('/archive', upload.single('image'), async function(req, res, next) {
const name = req.file.filename;
const avatar = 'http://localhost:3000/public/' + req.file.filename;
const gallery = new Gallery({
name,
avatar
});
const createdGallery = await gallery.save();
res.status(200).json({
gallery: {
...createdGallery._doc
}
});
console.log(createdGallery);
});
router.get("/archive", async (req, res, next) => {
const images = await Gallery.find();
res.status(200).json({ images });
});
我的组件的 HTML:
<app-header></app-header>
<h1>All Images</h1>
<hr />
<div *ngIf="images?.length > 0">
<div *ngFor="let image of images" class="image">
<img [src]="image.avatar" [alt]="image.name" />
<div>
<span>{{ image.name }}</span>
</div>
</div>
</div>
以及组件类型脚本文件:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { NgxSpinnerService } from "ngx-spinner";
import { ImageService } from '../Services/image.service';
import { Gallery } from "../post/gallery";
import { Subscription } from "rxjs";
@Component({
selector: 'app-archive',
templateUrl: './archive.component.html',
styleUrls: ['./archive.component.scss']
})
export class ArchiveComponent implements OnInit, OnDestroy {
public images: Gallery[] = [];
private imageSubscription: Subscription;
constructor(
private spinner: NgxSpinnerService,
private imageService: ImageService) { }
ngOnInit(): void {
this.imageService.getImages();
this.imageSubscription = this.imageService
.getImagesStream()
.subscribe((images: Gallery[]) => {
this.images = images;
//console.log(images);
});
this.spinner.show();
setTimeout(() => {
/** spinner ends after 5 seconds */
this.spinner.hide();
}, 3000);
}
ngOnDestroy() {
this.imageSubscription.unsubscribe();
}
}
有人可以指导我了解导致此错误的原因以及如何解决它吗?我对 MEAN Stack 相当陌生,非常感谢任何指导和帮助。非常感谢您。
解决方案
错误:Angular 组件找不到任何名为“public”的文件夹来访问图像,因为我没有在 server.js 中指定要访问的文件夹的任何路径。
解决方案:添加以下代码行:
app.use('/public', express.static(path.join('public')));
此行确保http://localhost:3000/
我可以使用 url 访问公用文件夹。否则,它只是为提供静态文件而设置的。
推荐阅读
- raster - Issue Converting HDF5 into raster format
- html - Images are not visible after hosting my website
- python - 如何按第二个元组元素对元组列表进行排序?
- python-3.x - Is it possible to read parquet files from S3 access point using pyarrow
- python - 在数组中找到最接近零的数字
- visual-studio - 如何处理 Nuget 依赖程序集的相对 HintPath?
- amazon-ec2 - Setting Turn server on EC2
- postgresql - psql命令和psql交互终端的区别
- swift - Modifying SwiftUI Views based on non-binary data / conditions?
- node.js - 无法在 Kubernetes 上使用 Node.Js 连接到 Elasticsearch(证书链中的自签名证书)