如何使用API从数据库中获取数组图像并将其转换为JSON数组以在Angular 4中的HTML中显示

// 导入所需的模块和库
const express = require('express');
const mysql = require('mysql');

// 创建数据库连接池
const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'your_database'
});

// 创建后端接口
const app = express();

// 定义API路由
app.get('/api/images', (req, res) => {
  // 在此处执行数据库查询，并将结果转换为JSON数组
  pool.getConnection((err, connection) => {
    if (err) throw err;
    connection.query('SELECT * FROM images', (error, results) => {
      connection.release();
      if (error) throw error;
      const jsonResults = results.map(image => {
        return {
          id: image.id,
          imageUrl: image.imageUrl
        };
      });
      res.json(jsonResults);
    });
  });
});

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

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() {
    this.http.get<any[]>('/api/images').subscribe(images => {
      this.images = images;
    });
  }
}

<div *ngFor="let image of images">
  <img [src]="image.imageUrl" alt="Image">
</div>