无法显示图像 - ANGULAR ERR_UNKNOWN_URL_SCHEME

Question

我正在开发 Angular 应用程序，但无法在我的网站上显示图像， 我在控制台中收到此消息：

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() 函数误认为是为 img 标记的 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>