Question

我将图像作为base64字符串存储在MongoDB中。我创建了Express路线以通过ID获取图像：

<select name="date-filter" class="dateSelect" ng-model="dateFilter" ng-options="image as image.date for image in images | unique:'image.date'"></select>            


<div ng-repeat="image in images | filter : dateFilter">

客户端：

router.get('/:userId/images/:imgId', (req, res) => {
  Image.findOne(
    { _id: req.params.imgId },
    (err, img) => {
      if (err) {
        res.status(500).send('someErr');
      } else {
        var resultImg = Buffer.from(img.data, 'base64');
        res.writeHead(200, {
          'Content-Type': 'image/png',
          'Content-Length': resultImg.length
        });
        res.end(resultImg);
      }
    }
  );
});

我可以肯定的是：

路径正确，服务器接收请求并返回200响应
已从MongoDB正确获取数据
base64字符串正确（当我将粘贴复制到https://codebeautify.org/base64-to-image-converter之类的验证程序时，它是有效的）

为什么不加载图像？

Answer 1

确保输出的开头有此字符串

res.body

您可以通过复制输出并将其放入静态html中进行测试，以查看其是否有效。因此可能会有所帮助

import { HttpClient, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class LocalisationProxy {

  constructor(private _nghttp: HttpClient, private _phttp: ProxyHttp) {}

  getAllCultures(): Observable<ApiResult<Dto.Culture[]>> {
    return this._nghttp.get('/platform/localisation/cultures/all', { observe: 'response' })
      .pipe(map((res: HttpResponse<any>) => ({ data: res.body, originalResponse: res })));
  }
}

Answer 2

您是否尝试过使用AJAX或Fetch API打后端？之后，您可以将来自该API的响应加载到图像元素

中

从Node REST API返回图像并在客户端的img.src中使用

2 个答案: