Javascript Can';在本地主机上找不到图像,角度为404错误

Javascript Can';在本地主机上找不到图像,角度为404错误,javascript,angular,typescript,Javascript,Angular,Typescript,我有一个角度8应用程序 我有这样的服务: @Injectable({ providedIn: 'root' }) export class GetProfileImageUrl { profileImagefile: File; constructor(private sanitizer: DomSanitizer) {} profileImageUrlDefault() { return this.profileImagefile === null ?

我有一个角度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;
  }

<img [src]="profileImageUrl" width="147px" />
 get profileImageUrl() {
    return this.getImageUrl.profileImageUrlDefault();
  }
我有一个组件,我在其中调用这个函数,如下所示:


@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;
  }

<img [src]="profileImageUrl" width="147px" />
 get profileImageUrl() {
    return this.getImageUrl.profileImageUrlDefault();
  }
在Constructor中,我有一个:

private getImageUrl: GetProfileImageUrl
模板如下所示:


@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;
  }

<img [src]="profileImageUrl" width="147px" />
 get profileImageUrl() {
    return this.getImageUrl.profileImageUrlDefault();
  }
所以我的问题是。我必须改变什么

多谢各位

对不起,这是我写的:

如果我这样做:


@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;
  }

<img [src]="profileImageUrl" width="147px" />
 get profileImageUrl() {
    return this.getImageUrl.profileImageUrlDefault();
  }
我得到这个错误:

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)
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)

在服务文件中,需要进行一项更改。三重方程式(==)应替换为双方程式(=

应在typescript文件中进行另一项更改。在这里,服务文件中包含的profileImageUrlDefault函数应按如下方式调用

get profileImageUrl() {
  return this.getImageUrl.profileImageUrlDefault();
}
这使您可以访问live stackblitz环境,在进行上述调整后,该解决方案可以正常工作


希望这个答案可能有帮助。

您没有调用该函数
返回此.getImageUrl.profileImageUrlDefault
应为
返回此.getImageUrl.profileImageUrlDefault()
。是的,对不起,我的错误,我更新了@nicetobetleteInfinity的后可能副本,请尝试下面的答案并让我知道。谢谢您的回复。是的,我没有发现任何错误。但现在的问题是,我总是得到默认('/assets/placeholder.jpg')图像,而不是所选图像。看起来你的逻辑只有一部分被发布了…在这里我找不到任何选择事件逻辑或任何与之相关的东西。尝试提供带有所有相关代码的完整逻辑或实时stavkblitz环境链接..好了,我必须在服务中传递profileImagefile:File作为参数。但我接受你的回答。谢谢你让我走上了正确的道路。