从mongodb检索图像并使用angular7显示它

// 导入依赖
const express = require('express');
const mongoose = require('mongoose');
const app = express();

// 连接MongoDB数据库
mongoose.connect('mongodb://localhost:27017/your-database-name', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB Connected'))
  .catch(err => console.log(err));

// 定义图像模型
const imageSchema = new mongoose.Schema({
  name: String,
  imageUrl: String
});

const Image = mongoose.model('Image', imageSchema);

// 定义API路由，处理图像检索请求
app.get('/images', (req, res) => {
  Image.find({}, (err, images) => {
    if (err) {
      console.log(err);
      res.status(500).send('Internal Server Error');
    } else {
      res.json(images);
    }
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

// 在Angular组件中导入依赖
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-image-list',
  templateUrl: './image-list.component.html',
  styleUrls: ['./image-list.component.css']
})
export class ImageListComponent implements OnInit {
  images: any[];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    // 发送HTTP GET请求获取图像数据
    this.http.get<any[]>('/images').subscribe(
      data => {
        this.images = data;
      },
      error => {
        console.log(error);
      }
    );
  }
}

<!-- 在Angular模板中显示图像数据 -->
<div *ngFor="let image of images">
  <img [src]="image.imageUrl" alt="{{ image.name }}">
</div>