CODEWITHSUNDEEP
javascriptangulartypescript
NiceTobeBottleInfinity
NiceTobeBottleInfinity

Reputation: 71

Can't find image on localhost, 404 error in angular

I have a angular 8 application.

And I have service like this:


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

And I have a component where I call this function that looks like this:

  get profileImageUrl() {
    return this.getImageUrl.profileImageUrlDefault;
  }

and in the constrcutor I have this:

private getImageUrl: GetProfileImageUrl

and the template looks like this:

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

But I get this error:

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)

So my question is. What I have to change?

Thank you

Sorry, that was type from me:

if I do it like this:

 get profileImageUrl() {
    return this.getImageUrl.profileImageUrlDefault();
  }

I get this error:

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)

Upvotes: 0

Views: 910

Answers (1)

VSM
VSM

Reputation: 1785

In service file, one change needs to be done. Triple equations (===) should be replaced by double (==).

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

an another change should be done in typescript file. Here profileImageUrlDefault function included in service file should be invoked as below.

get profileImageUrl() {
  return this.getImageUrl.profileImageUrlDefault();
}

This link provide you access to a live stackblitz environment, where solution is working properly after made above adjustments.

Hope this answer may be helpful.

Upvotes: 1

Related Questions