css - Ionic 3 中的背景图像绑定(bind)不起作用，无论我如何传递它

Question

我在使用 Ionic 3 时遇到了一个非常奇怪的问题(模板绑定(bind)，特别是样式)，这让我最近几天受阻，无法找到解决方案，甚至不知道是什么原因造成的。我希望任何人都可以帮助我排除故障并修复发生的一切。

我正在使用 Ionic 3 开发一个应用程序。在其中一个页面中，有一个列表包含一些文本和图像作为背景图像。这就是我的问题出现的地方。图片没有显示，而且我找不到让它们工作的方法，尽管我已经尝试了我在互联网上阅读过的所有可能的解决方案。

图像位于本地 assets 文件夹中。图像的路径来自具有“图像”属性的对象数组，包含路径 (assets/imgs...). 我确信路径是正确的，因为如果我使用 with [src]="coto.image"(单个元素及其属性，由*ngFor生成)显示图像。对于背景图像绑定(bind)，我尝试使用:

[style.backgroundImage]="'url(' + coto.image + ')'"
[ngStyle]="{'background-image': 'url(' + coto.image + ')'}"
style="background-image: url({{coto.image}})"

注意:绝对外部 URL 有效。例如:

[style.backgroundImage]="'url(https://example.com/image.jpg)'"
[ngStyle]="{'background-image': 'url(https://example.com/image.jpg)'}"
style="background-image: url(https://example.com/image.jpg)"

但是如果我设置一个变量 = "https://example.com/image.jpg "并将其绑定(bind)到模板，就像我对 coto.image ([ngStyle]="{'background-image': 'url(imageVar)' }"，它也不起作用。

我注意到的另一件事是，如果我手动设置本地镜像的路由，(assets/imgs...; 应该由 *ngFor 的 coto.image 元素传递的相同)，它仍然是不起作用，这对我来说似乎是最奇怪的。

还尝试了 DOMSanitizer 的 bypassSecurityTrustStyle，结果...

<div class="image" [ngStyle]="{'background-image': 'url(' + coto.image + ')', 'min-height': '180px'}">
<!-- <div class="image" [style.minHeight.px]='180' [style.backgroundImage]='"url(" + coto.image + ")"'> -->
<!-- <div class="image" style="background-image: url({{ coto.image }})"> -->
<!-- <img [src]="coto.image"> -->
</div>

如果有人对这里发生的事情有任何了解，我将非常感谢阅读它，因为我越是尝试解决这个问题，我就越感到迷茫。

非常感谢!

*P.S:对于我犯的任何语法或拼写错误，我深表歉意，英语不是我的母语 =)

Answer 1

好吧，过了一段有趣的时间后，灯亮了。问题与图像名称有关(“图像 (1).jpg”、“图像 (2).jpg”...)。我删除了“()”，现在它可以完美运行了。该问题似乎与 Ionic 应用于 HTML/样式/模板中的任何内容的一些清理有关，这可能不允许使用“()”。这很奇怪，因为在 Angular 中它确实有效......我希望这可以帮助任何可能遇到同样问题的人。