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>

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

1 个答案: