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

Question

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)

You didn't invoke the function. `return this.getImageUrl.profileImageUrlDefault` should be `return this.getImageUrl.profileImageUrlDefault()`. — mbojko, Sep 16 '20 at 20:57
possible duplicate of https://stackoverflow.com/questions/27120757/failed-to-execute-createobjecturl-on-url — Polochon, Sep 16 '20 at 22:13
@NiceTobeBottleInfinity, Try my answer below and let me know. — VSM, Sep 16 '20 at 22:20

score 1 · Accepted Answer · answered Sep 16 '20 at 22:18

1

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.

answered Sep 16 '20 at 22:18

VSM

1,765
8
18

Thank you for your reply. Yes, I dont get any errors. But the problem is now that I always get the default('/assets/placeholder.jpg') image and not the selected image. – NiceTobeBottleInfinity Sep 17 '20 at 06:38
I provided the solution according to the details provided above. It seems only part of your logic has been posted...Here I couldn't find any selection event logic or anything related to it. Try to provide full logic or live stavkblitz environment link with all relevant codes.. – VSM Sep 17 '20 at 07:25
Oke, I had to pass it in the service the profileImagefile: File as parameter . But I accept your answare oke. So thank you for getting me on the right road. – NiceTobeBottleInfinity Sep 17 '20 at 07:35

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

1 Answers1