gpt4 book ai didi

javascript - 具有插值的 ng 样式不渲染背景图像?

转载 作者:技术小花猫 更新时间:2023-10-29 11:49:57 27 4
gpt4 key购买 nike

我正在尝试使用 angular ng-style 更改 div 的背景图像。

这是我的代码。

<div class="cover-image" ng-style="{'background-image' : 'url({{data.image}})'}"></div>

但是,当我运行元素时,图像没有显示,而是图像的 url 已更改为“localhost:”

检查元素显示这个,

<div class="cover-image" ng-style="{'background-image' : 'url(<some image url>)'}" style="background-image: url(http://localhost:<port>/);"></div>

CSS

.cover-image
{
height:100px;
width:100%;
display: block;
}

这是为什么?我怎样才能解决这个问题?谢谢

最佳答案

我相信 ng-style 在对象表达式的键值包含插值并且它们被异步绑定(bind)时将不起作用。相反,您可能必须绑定(bind)样式对象本身。

例子:-

  $scope.data.style = {'background-image' : 'url(/path/to/image)'}

  <div class="cover-image" ng-style="data.style"></div>

有趣的是,以下也有效:

<div class="cover-image" ng-style="{'background-image' : 'url(' + data.image + ')'}">

这可能是因为 ngstyle directive sets watch/watchcollection属性上。当绑定(bind)的 ng-style 对象的键/值的值具有插值并且该值是动态绑定(bind)时,这会导致问题,因为 ngstyle 指令将在 attr.ngStyle 上设置监视,即 {'background-image' : 'url()'} 因为在 ngstyle 指令之前插值已经启动。因此 watch 不会第二次执行设置样式(即使 ng-style 指令的值将在 View 上正确显示插值),并且 element.css({'background-image ' : 'url()'}) 将使用当前域的 url 呈现样式(哪个浏览器会这样做)。

angular.module('app', []).controller('ctrl', function($scope, $timeout) {
$scope.data = {};
$timeout(function() {
$scope.data.image = 'http://placehold.it/50x50';
$scope.data.style = {
'background-image': 'url(http://placehold.it/50x50)'
}

}, 1000)

});
.cover-image {
height: 100px;
width: 100%;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
Will not display
<div class="cover-image" ng-style="{'background-image' : 'url({{data.image}})'}"></div>
Will display with Object binding
<div class="cover-image" ng-style="data.style"></div>
Will display with string concat
<div class="cover-image" ng-style="{'background-image' : 'url(' + data.image + ')'}"></div>



</div>

关于javascript - 具有插值的 ng 样式不渲染背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27608932/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com