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

Posted 2023-03-06

【中文标题】在图像标签上使用角度 ng-style 来调出背景图像

【英文标题】：using angular ng-style on an image tag to call out a background image

【发布时间】：2014-04-12 10:07:43

【问题描述】：

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

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

这是JSFiddle

【参考方案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>

【讨论】：

如果我还需要更改一些样式属性（高度、宽度等）怎么办？似乎解决方案是使用 div ..

在这种情况下没关系，您可以使用ng-style 标签来设置这些类型的属性。在 <img> 元素上设置 background-image 是没有意义的。