错误TypeError:无法读取模板中未定义的属性“文件" [英] ERROR TypeError: Cannot read property 'file' of undefined in template

问题描述

我正在尝试在个人资料用户组件中插入图片.但这向我显示了一个错误:文件"未定义.甚至个人资料图片也在那里显示.在MySQL中，文件数据类型为 MediumBlob().这是 .ts 文件中的代码:

I'm trying to insert a picture in profile user component. But there it's showing me a error: that the 'file' is undefined. even the profile picture its showing there. In MySQL the file datatype is MediumBlob(). this is the code in .ts file:

this.userFileServices.getUserPicture(this.userProfile.id).subscribe(data => {
  this.userFile = data;
  console.log(data);

});

， .html 中的代码为:

<img class=" img-circle" src="data:image/png;base64,{{userFile.file}}" 
    width="140" height="140" style="margin-bottom: 1rem;height: 130px;">

图片已设置为配置文件，我可以看到它，但是也存在此类错误: ERROR TypeError:无法读取未定义的属性'file'

the picture is set to profile, I can see it, but there is also this kind of error: ERROR TypeError: Cannot read property 'file' of undefined

推荐答案

第二个问题:图像的src应该是您需要在构造函数中注入的受信任的url: private sanitizer:DomSanitizer 然后:

For your second problem: the src of the image should be a trusted url you need to inject in your constructor: private sanitizer: DomSanitizer and then :

this.userFileServices.getUserPicture(this.userProfile.id).subscribe(data => {
      const imageData = 'data:image/png;base64," + data.file;
      this.imageSrc = this.sanitizer.bypassSecurityTrustUrl(imageData);
   });
  })

，然后在您的html中:

and then in your html:

<img class=" img-circle" [src]="imageSrc" width="140" height="140" style="margin-bottom: 1rem;height: 130px;">

这篇关于错误TypeError:无法读取模板中未定义的属性“文件"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！