具有内插值的 ng 样式不呈现背景图像?

Posted

技术标签:

【中文标题】具有内插值的 ng 样式不呈现背景图像?【英文标题】:ng-style with interpolated value not rendering the background image? 【发布时间】:2015-02-20 22:06:01 【问题描述】:

我正在尝试使用角度 ng 样式更改 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;

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

【问题讨论】:

以下也可以:\'data.image\' 【参考方案1】:

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

例子:-

  $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。当绑定的 ng-style 对象的键/值的值具有插值并且该值是动态绑定时,这会导致问题,因为 ngstyle 指令将在 attr.ngStyle 上设置监视,这是 'background-image' : 'url()',因为插值已经启动在 ngstyle 指令之前。因此手表不会第二次执行设置样式(即使 ng-style 指令的值会在视图上正确显示插值),并且最初设置的样式 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>

【讨论】:

这可行,但我在控制台中收到警告资源解释为图像但使用 MIME 类型 text/html 传输:“localhost:8100” 我不确定这是否与我正在使用的离子框架有关,但我在问题中发布的代码在另一个页面中可以正常工作。我就是不知道为什么

以上是关于具有内插值的 ng 样式不呈现背景图像?的主要内容,如果未能解决你的问题,请参考以下文章

Angular 2背景图像未呈现

在 React Native iOS 中的图像顶部呈现具有透明背景的文本框

为背景图像速记正确格式化 ng-style

具有图层列表背景可绘制的自定义视图呈现黑屏

背景图像仅在重新加载页面后显示

通过 angularJS ng-style 可变背景图像