我在Ionic 3 (模板绑定，特别是样式)上遇到了一个非常奇怪的问题，这几天一直让我无法找到解决方案，甚至不知道是什么导致了这个问题。我希望任何人都能帮助我解决问题和解决任何问题。

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

图像位于本地assets文件夹中。图像的路径来自一个具有‘(assets/imgs...).’属性的对象数组，其中包含路径图像。我确信路径是正确的，因为如果我使用[src]="coto.image" (single element and his property, generated by an *ngFor)，图像就会显示出来。对于背景图像绑定，我尝试使用：

[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“并将其绑定到模板，就像我对coto.image所做的那样(ngStyle="{'background-image'：'url(imageVar)'}”)，它也不起作用。

我注意到的另一件事是，如果我手动设置本地图像的路由(assets/IMG...；应该由*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>

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

非常感谢!

*附言:很抱歉我犯了任何语法或拼写错误，英语不是我的母语=)

转载请注明出处:http://www.hnsdbxf.com/article/20230526/1887786.html