无法显示图像 - 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(template):

中使用这样的消毒剂

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

但是这会附加 http://localhost:4200 + full url 这绝对是我不想要的东西，因为资源与 http://localhost:4200

无关

谢谢大家

干杯

Answer 1

这可能是因为您弄错了 CSS url() function with the way to specify a URL/path for the src attribute of an img 标签。相反，删除代码中周围的 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>

无法显示图像 - ANGULAR ERR_UNKNOWN_URL_SCHEME

Can not display image - ANGULAR ERR_UNKNOWN_URL_SCHEME

html

url

src

angular