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()函数用一种为src标签的img属性指定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>

无法显示图片-ANGULAR ERR_UNKNOWN_URL_SCHEME

1 个答案: