Can not display image - ANGULAR ERR_UNKNOWN_URL_SCHEME

Question

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

Why are you using the url() attribute only available in CSS? You should be able to specify the URL directly in the src attribute of the img tag in HTML. — Edric
– Edric, Commented Sep 7, 2019 at 18:20

Edric · Accepted Answer · 2019-09-07 18:23:16Z

1

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>

answered Sep 7, 2019 at 18:23

Edric

27.2k13 gold badges88 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joy Biswas Over a year ago

Also please ensure api path has a scheme else it will be considered as a relative url

Roxy'Pro Over a year ago

@Edric how come Url caused issues ?

Edric Over a year ago

Because you're supposed to just specify the URL without the url() appended to it. The url() part is meant for CSS. (I've already specified why it didn't work in my answer)

Collectives™ on Stack Overflow

Can not display image - ANGULAR ERR_UNKNOWN_URL_SCHEME

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related