Can not display image - ANGULAR ERR_UNKNOWN_URL_SCHEME

I'm working on Angular application and I can not display image on my website, I'm getting this messages in console:

unsafe:url(http://local.api.test.come/Uploads/af21cb1b-066c-48c6-b6d6-0116a133810d.jpg):1

GET unsafe:url(http://local.api.test.com/Uploads/af21cb1b-066c-48c6-b6d6-0116a133810d.jpg) net::ERR_UNKNOWN_URL_SCHEME

If I paste this path into browser I can easily preview image:

local.api.test.come/Uploads/af21cb1b-066c-48c6-b6d6-0116a133810d.jpg

But In my app it wont be loaded..

Here is my code:

<div *ngFor="let content of contents;">
  <div class="card-img-actions mx-1 mt-1">
    <img class="card-img img-fluid" [src]="'url('+ apiPath + content.path +')'" alt={{content.fileName}} />
  </div>
</div>

As It's possible to see URL is correct But I can not load image throught app.. if I enter url in browser as I said it opens image without any issues ...

P.S I've tried using sanitizer like this in my HTML(template):

[src]="domSanitizer.bypassSecurityTrustUrl('url('+ apiPath + content.path +')')"

But than this appends http://localhost:4200 + full url which is absolutly something that I dont want because resouce has nothing with http://localhost:4200

Thanks guys

Cheers

Solution

This is probably because you've mistaken the CSS url() function with the way to specify a URL/path for the src attribute of an img tag. Instead, remove the surrounding url() portion in your code and replace it with the following:

<div *ngFor="let content of contents">
  <div class="card-img-actions mx-1 mt-1">
    <img class="card-img img-fluid" [src]="apiPath + content.path" [alt]="content.fileName" />
  </div>
</div>