无法显示图像角ERR_UNKNOWN_URL_SCHEME

Question

我正在进行角度应用程序，我无法在我的网站上显示图像，我在控制台中得到了以下消息：

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

如果将此路径粘贴到浏览器中，则可以轻松预览图像：

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

但在我的应用程序中它不会被加载。

这是我的代码：

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

可以看到URL是正确的，但我不能通过应用程序加载图像。如果我在浏览器中输入url，就像我说的那样打开图像，没有任何问题.

P.S .我尝试在我的HTML(模板)中使用这样的杀菌剂：

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

但是比这个附加http://localhost:4200 + full url，这绝对是我不想要的东西，因为资源与http://localhost:4200没有任何关系

谢谢各位

干杯

Answer 1

这可能是因为您将CSS url()函数与为src标记的src属性指定URL/路径的方式弄错了。相反，删除代码中的周围url()部分，并将其替换为以下内容：

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