显示图像时 Object.parse 位置 0 处 JSON 中的意外标记

Posted 2023-03-24

【中文标题】显示图像时 Object.parse 位置 0 处 JSON 中的意外标记

【英文标题】：Unexpected token in JSON at position 0 at Object.parse while displaying image

【发布时间】：2018-12-15 16:20:04

【问题描述】：

我正在尝试将图像存储在 mongodb 中并将其显示回 Angular。我已完成上传，但在尝试显示时出现错误。我在 POSTMAN 中测试了我的 API。它工作正常。我认为错误是由于响应类型。

API

    get('/images',(req, res, next) => 
      const user = AuthBase.getUser(req, res);
      this.model.findOne(\[this.userForeignKey\]: new mongoose.Types.ObjectId(user._id), (err, image) => 
          if (err) 
              res.sendStatus(400);
          
          // stream the image back by loading the file
          res.setHeader('Content-Type', 'image/jpeg'); 
          fs.createReadStream(path.join(UPLOAD_PATH, image.filename)).pipe(res);
//if I add res.json(image) here, I am not getting any error but the Image is getting broken        
 )
    );][1] 

服务

getImage(): Observable<any> 
  return this.http.get(`/api/images`);

组件

images:[]
  getImage() 
  
 this.patientService.getImage().subscribe(
    data => 
   this.images = [data]; 
   console.log(data); ,
    error => console.log(error) ); 
  

【问题讨论】：

假设您的响应是 JSON，而不是图像。这是有棱角的吗？

订阅的console.log()数据中输出什么

HttpErrorResponse headers: HttpHeaders, status: 200, statusText: "OK", url: "localhost:4200/api/images", ok: false, ... error : error: SyntaxError: Unexpected token � in JSON在 XMLHt... 的 Object.parse () 的位置 0 处，文本：“����C↵ ↵↵ ...+�9��”�q����X��?���Silֹ� k��ƶ�����؎1�m/��" 标头：HttpHeaders normalizedNames: Map(0)，lazyUpdate：null，lazyInit：ƒ 消息：“解析 localhost:4200/api/images 期间的 Http 失败”名称：“HttpErrorResponse”正常：错误状态：200 statusText

首先你的 getImage() 服务有什么意义？要在模板中显示图像，您需要将图像的 url 放在 src 属性中，浏览器将加载图像。因此不需要使用 AJAX 请求加载图像。

但是您的 REST 服务不会返回带有 url 属性的 JSON 对象 (img)。它返回 JPEG 图像的字节数。您所需要的只是<img src="/api/images" .../>：然后浏览器将通过向 /api/images 发出请求来加载 REST 服务返回的图像字节。

【参考方案1】：

在获取请求中包含响应类型

getImage(): Observable<any> 
  return this.http.get(`/api/images`, responseType: 'blob' );

【讨论】：

Blob(23413) size: 23413, type: "image/jpeg" size:23413 type:image/jpeg" proto__:Blob 我在控制台中得到了这个。 JSON 错误中的意外令牌现在消失了。但我无法显示图像

您需要将您的 blob 转换为图像格式，勾选此项以将 blob 转换为图像***.com/questions/45530752/…