无法在本地主机上找到图像，角度出现 404 错误

Question

我有一个角度为 8 的应用程序。

我有这样的服务：

@Injectable({

  providedIn: 'root'

})

export class GetProfileImageUrl {

  profileImagefile: File;

  constructor(private sanitizer: DomSanitizer) {}

  profileImageUrlDefault() {

    return this.profileImagefile === null

      ? '/assets/placeholder.jpg'

      : this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.profileImagefile));

  }

}

我有一个组件，我在其中调用这个函数，如下所示：

  get profileImageUrl() {

    return this.getImageUrl.profileImageUrlDefault;

  }

在构造函数中我有这个：

private getImageUrl: GetProfileImageUrl

模板如下所示：

<img [src]="profileImageUrl" width="147px" />

但我收到此错误：

profileImageUrlDefault()%20%7B%20%20%20%20%20%20%20%20return%20this.profileImagefile%20===%20null%20%20%20%20%20%20%20%20%20%20%20%20:1 GET http://localhost:4200/profileImageUrlDefault()%20%7B%20%20%20%20%20%20%20%20return%20this.profileImagefile%20===%20null%20%20%20%20%20%20%20%20%20%20%20%20?%20%27/assets/placeholder.jpg%27%20%20%20%20%20%20%20%20%20%20%20%20:%20this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.profileImagefile));%20%20%20%20} 404 (Not Found)

Image (async)

所以我的问题是。我必须改变什么？

谢谢

抱歉，这是我的类型：

如果我这样做：

 get profileImageUrl() {

    return this.getImageUrl.profileImageUrlDefault();

  }

我收到此错误：

core.js:5871 ERROR TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

    at GetProfileImageUrl.profileImageUrlDefault (get-profile-image-url.ts:15)

    at ProfileInformationComponent.get profileImageUrl [as profileImageUrl] (profile-information.component.ts:86)

    at ProfileInformationComponent_Template (profile-information.component.html:3)

    at executeTemplate (core.js:11926)

    at refreshView (core.js:11773)

    at refreshComponent (core.js:13213)

    at refreshChildComponents (core.js:11504)

    at refreshView (core.js:11825)

    at refreshComponent (core.js:13213)

    at refreshChildComponents (core.js:11504)

Answer 1

在服务文件中，需要进行一项更改。三重方程式 ( === ) 应替换为双方程式 ( == )。@Injectable({providedIn: 'root'})export class GetProfileImageUrl {&nbsp; profileImagefile: File;&nbsp; constructor(private sanitizer: DomSanitizer) {}&nbsp; profileImageUrlDefault() {&nbsp; &nbsp; return this.profileImagefile == null&nbsp; &nbsp; &nbsp; ? '/assets/placeholder.jpg'&nbsp; &nbsp; &nbsp; : this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.profileImagefile));&nbsp; }}应该在打字稿文件中进行另一项更改。这里应该调用服务文件中包含的profileImageUrlDefault函数，如下所示。get profileImageUrl() {&nbsp; return this.getImageUrl.profileImageUrlDefault();}通过此链接，您可以访问实时的 stackblitz 环境，在进行上述调整后，解决方案可以正常工作。希望这个答案可能会有所帮助。