css - 在图像标签上使用 angular 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>