Question

我有一个与这里描述的问题非常相似的问题，但是不幸的是，答案中提供的所有解决方案都不对我有用。我正在尝试在Ionic视图之一中显示ngFor内的图像。

代码如下：

  <div
    class="activities__elem-img"
    [ngStyle]="{
      'background-image':'url(http://mybackend.com/' + item.node.image ? item.node.image.key : 'notfound' + ')'
    }"
  ></div>

不幸的是，样式未在DOM中显示。但是，此代码可与其他CSS属性一起使用，例如background-size。如何显示图像？

我在HTML代码中看到的全部是：ng-reflect-ng-style="[object Object]"。我希望看到一个指向我图片的URL。

编辑：按照注释中的建议工作，但是当我将其放入函数中时不起作用：

[ngStyle]="{
  'background-size': 'contain',
  'background-image': getImageUrl(item)
}

还有我的功能

getImageUrl({ node }) {
  const imageUrl = `http://my.backend.com/${node.image ? node.image.key : "notfound"}`;
  return `url ( '${imageUrl}' )`;
}

Answer 1

由于+运算符的precedence比?:运算符高，因此您的表达式等同于：

('url(http://mybackend.com/' + item.node.image) ? item.node.image.key : ('notfound' + ')')

您应该在条件运算符两边加上括号：

'url(http://mybackend.com/' + (item.node.image ? item.node.image.key : 'notfound') + ')'

在Ionic中以ngFor显示图像

1 个答案: