对 Angular 组件的图像的 GET 请求返回 404 Not Found

Question

我正在尝试从我的 mongodb 数据库上传和检索图像。我正在使用 multer 进行图像上传，并使用 express 和 mongoose 进行 GET/POST 请求。到目前为止，我已经成功地将图像上传到数据库并使用我的 Angular 服务检索它。图片的数据，即 _id、name 和 avatar 值都已由我的服务成功获取。但是当我尝试在我的组件中显示图像时，它在浏览器控制台中给了我这个错误：

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 配置以及我的 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 相当陌生，非常感谢任何指导和帮助。非常感谢。

Answer 1

错误：Angular 组件找不到任何名为“public”的文件夹来访问图像，因为我没有在 server.js 中指定要访问的文件夹的任何路径。

解决方案：添加以下代码行：

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

这一行确保使用 url http://localhost:3000/ 我可以访问公用文件夹。否则，它只是为提供静态文件而设置。