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

Question

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

    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>