在图像标签上使用角度 ng-style 来调出背景图像

Question

我正在尝试有条件地显示具有 ng 样式的图像。 我已经尝试了here（以及文档中）列出的所有建议，但似乎没有任何效果。

    first try:
<br/>
<img alt="" ng-style="{'background-image':'url(\'https://www.google.com/images/srpr/logo4w.png\')'}">
<br/>
second try:    
<br/>
<img src="" alt="" ng-style="{'background-image':'url(\'https://www.google.com/images/srpr/logo4w.png\')'}">
<br/>
third try:    
<br/>
<img src="" alt="" ng-style="{background-image:'url(https://www.google.com/images/srpr/logo4w.png)'}">
<br/>
fourth try:    
<br/>
<img src="" alt="" ng-style="{background:'url(https://www.google.com/images/srpr/logo4w.png)'}">

这是JSFiddle

Answer 1

background-image 对 <img> 元素没有意义，因此您需要使用 ng-src 而不是 ng-style。

此外，您的示例中缺少 ng-app 属性，因此 Angular 并未实际运行。

所以一个可行的例子是：

<div ng-app>
    <img ng-src="https://www.google.com/images/srpr/logo4w.png">
</div>

不过，我猜你可以在其他元素上使用ng-style，比如div。只需确保其中包含内容，以便实际显示背景：

<div ng-app>
    <div style="padding: 20px;" ng-style="{'background-image':'url(\'https://www.google.com/images/srpr/logo4w.png\')'}">This is some content</div>
</div>