为啥背景图像的 ng-style 不起作用？

Posted 2023-03-06

【中文标题】为啥背景图像的 ng-style 不起作用？

【英文标题】：Why ng-style for background-image doesn't work?为什么背景图像的 ng-style 不起作用？

【发布时间】：2014-08-31 02:15:54

【问题描述】：

我的ng-style如下，对后台不起作用：

<div
    ng-repeat="s in slider.slides"
    class="slide"
    ng-style="border: 'solid 4px red', 'background-image': 'url(rsc/selectiontodose/s.photo.jpg)'"
    style="width: sizepx; height: sizepx; margin:0; left:-$parent.slide*sizepx;">
</div>

我添加了边框以确保考虑到 hg 样式指令本身（并且边框是红色的）。

在 DOM 中，当边框实际存在时，我看不到背景。

有什么想法吗？

【问题讨论】：

试试ng-style="'border': 'solid 4px red', 'background-image': 'url(' + s.photo + ')'

不，插值没问题（我刚刚做了艰难的测试）。 @丹尼尔贝克

插值是对的，抱歉；匆忙下结论（我经常被那种事情绊倒，所以......）你的代码未显示的部分必须发生一些事情；你有什么应该工作：jsfiddle.net/LSz7W也许是错误的图像路径？

【参考方案1】：

有类似的情况，我发现：

<div class="splash-banner" ng-style="'background-image': 'url(\'banner.backgroundImage\')', 'background-color': banner.backgroundColor">

与以下相比呈现不一致：

<div class="splash-banner" ng-style="'background-image': 'url(\'' + banner.backgroundImage + '\')', 'background-color': banner.backgroundColor">

不幸的是，我不太了解 angular，但似乎 ng 样式的表达式会在 banner.backgroundImage 有值之前对其进行评估。我想知道这是否是因为横幅项目是从 REST 请求中检索的。然后它将默认为当前页面的 url（或至少是当前主机名）。